我一直在關注效果基本show指導這裏:http://ng.malsup.com/#!/css-animations-for-ng-hide_ng-show角NG-顯示/隱藏動畫
從我除了希望相反的效果。而不是滑動/隱藏點擊,我想要的內容向下滑動/出現在點擊。所以,內容隱藏在負載上。我創建了一個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-動畫被成功添加作爲一個依賴。
UPDATE:
更新plunker:http://plnkr.co/edit/Vwuin1KLrNUDSkfv7cBy?p=preview
你的plunker工作不正常,因爲html沒有加載,把腳本放在關閉的body標籤之前,或者在加載的文檔上運行它 –
@AntonioSmoljan - 謝謝,請參閱更新的plunker。 –