Angular ng-显示/隐藏动画

Angular ng-show / hide animations

本文关键字：隐藏 动画 显示 ng- Angular      更新时间：2023-09-26

我一直遵循这里的幻灯片指南:http://ng.malsup.com/#!/css-animations-for-ng-hide_ng-show

Apart from我想要相反的效果。而不是滑动/隐藏点击，我希望内容滑动/出现在点击。所以内容在加载时是隐藏的。我在这里创建了一个柱塞，但似乎不起作用: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/Vwuin1KLrNUDSkfv7cBy?p=preview

请看演示: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>
相关文章：