Angular 显示/隐藏动画
Angular ng-show / hide animations
我一直在关注这里的 slideUp 指南:http://ng.malsup.com/#!/css-animations-for-ng-hide_ng-show
除了我想要相反的效果。我希望内容在单击时滑动 down/appear,而不是在单击时滑动 up/hiding。因此,内容在加载时隐藏。我在这里创建了一个 plunker,但似乎没有用:http://plnkr.co/edit/12wPKGqn4g3Fctm7NKnA
HTML:
<ul>
<li ng-repeat-start="item in data">
<p>Name: {{item.name}} <span ng-click="example1=!example1">+</span></p>
</li>
<li ng-repeat-end class="cssSlideUp" ng-hide="example1">
DOB: {{item.dob}}
Gender: {{item.gender}}
</li>
</ul>
CSS:
.ng-hide-add, .ng-hide-remove {
/* ensure visibility during the transition */
display: block !important; /* yes, important */
}
.cssSlideUp {
transition: .3s linear all;
height: 100px;
overflow: hidden;
}
.cssSlideUp.ng-hide {
height:0;
}
感觉 ng-animate 没有被成功添加为依赖项。
更新:
请看演示:http://plnkr.co/edit/N6fPYgipvML2rzmEt4So?p=preview
看来您需要更改 DOM
的位结构
<ul>
<li ng-repeat="item in data">
<p>Name: {{item.name}} <span ng-click="example1=!example1">+</span></p>
<p class="cssSlideUp" ng-hide="example1">
DOB: {{item.dob}}
Gender: {{item.gender}}
</p>
</li>
</ul>
我一直在关注这里的 slideUp 指南:http://ng.malsup.com/#!/css-animations-for-ng-hide_ng-show
除了我想要相反的效果。我希望内容在单击时滑动 down/appear,而不是在单击时滑动 up/hiding。因此,内容在加载时隐藏。我在这里创建了一个 plunker,但似乎没有用:http://plnkr.co/edit/12wPKGqn4g3Fctm7NKnA
HTML:
<ul>
<li ng-repeat-start="item in data">
<p>Name: {{item.name}} <span ng-click="example1=!example1">+</span></p>
</li>
<li ng-repeat-end class="cssSlideUp" ng-hide="example1">
DOB: {{item.dob}}
Gender: {{item.gender}}
</li>
</ul>
CSS:
.ng-hide-add, .ng-hide-remove {
/* ensure visibility during the transition */
display: block !important; /* yes, important */
}
.cssSlideUp {
transition: .3s linear all;
height: 100px;
overflow: hidden;
}
.cssSlideUp.ng-hide {
height:0;
}
感觉 ng-animate 没有被成功添加为依赖项。
更新:
请看演示:http://plnkr.co/edit/N6fPYgipvML2rzmEt4So?p=preview
看来您需要更改 DOM
的位结构<ul>
<li ng-repeat="item in data">
<p>Name: {{item.name}} <span ng-click="example1=!example1">+</span></p>
<p class="cssSlideUp" ng-hide="example1">
DOB: {{item.dob}}
Gender: {{item.gender}}
</p>
</li>
</ul>