2015-10-13 126 views
3

我一直在關注效果基本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

+1

你的plunker工作不正常,因爲html沒有加載,把腳本放在關閉的body標籤之前,或者在加載的文檔上運行它 –

+0

@AntonioSmoljan - 謝謝,請參閱更新的plunker。 –

回答

2

請看到演示: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> 
+0

感謝以上。我認爲我的UL結構可以與ng-repeat-start和end一起使用..查看我的更新過的plunker:http://plnkr.co/edit/Vwuin1KLrNUDSkfv7cBy?p=preview –

+0

我面臨的問題是我想要DOB和性別隱藏在載入中。在這種情況下,顯示/滑動點擊+ –

+0

,請將ng-hide更改爲像這裏顯示的ng-show http://plnkr.co/edit/atkNSTHndsw5oAv1Pc3I?p=preview – sylwester