div에 대한 간단한 슬라이드 아래 / 위 애니메이션을 만들고 싶습니다. 문제는 div에 고정 높이가있을 때만 작동한다는 것입니다.
index.html
<div id="guildDetails" class="animate-show" ng-show="guildDetails.show">
</div>
style.css
.ng-hide-add, .ng-hide-remove {
display: block !important;
}
.animate-show {
transition: .3s linear all;
height: 500px;
overflow: hidden;
}
.animate-show.ng-hide {
height:0;
}
작동하지만 div의 콘텐츠는 정적이 아니므로 500px가 너무 크고 때로는 너무 작습니다. 높이를 자동으로 설정하려고했지만 설정하면 작동하지 않습니다.
고정 높이를 사용하지 않으려면 어떻게 애니메이션을 적용 할 수 있습니까?
이 문제를 해결하기위한 각도 플러그인 ng-slide-down 이 있습니다. 동적 콘텐츠 슬라이드를 위해 프로젝트에서 성공적으로 사용했습니다.
여기 예제에서 코드 복사
<div ng-click="widgetExpanded = !widgetExpanded" class="head">
Click to slide in/out
</div>
<div ng-slide-down="widgetExpanded" lazy-render duration="1">
<div class="content">
Some awesome content here
</div>
</div>
ng-slide-down="widgetExpanded"부울 속성과 함께 사용 하고 div를 위아래로 슬라이딩하도록 업데이트하십시오.
JS-Fiddle 예제
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다