角NG-显示/隐藏动画

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

来源

2015-10-13 Oam Psy

你的plunker工作不正常，因为html没有加载，把脚本放在关闭的body标签之前，或者在加载的文档上运行它 –

@AntonioSmoljan - 谢谢，请参阅更新的plunker。 –

请看到演示：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>

来源

2015-10-13 16:04:10 sylwester

感谢以上。我认为我的UL结构可以与ng-repeat-start和end一起使用..查看我的更新过的plunker：http://plnkr.co/edit/Vwuin1KLrNUDSkfv7cBy?p=preview –

我面临的问题是我想要DOB和性别隐藏在载入中。在这种情况下，显示/滑动点击+ –

，请将ng-hide更改为像这里显示的ng-show http://plnkr.co/edit/atkNSTHndsw5oAv1Pc3I?p=preview – sylwester

角NG-显示/隐藏动画

回答

相关问题