【问题标题】：Properly animate hiding/showing element with Angular and animate.css使用 Angular 和 animate.css 正确地为隐藏/显示元素设置动画
【发布时间】：2014-05-21 14:52:37
【问题描述】：
我有一个显示问题的基本 plunker：http://plnkr.co/edit/L3rhEIdrnTucG0M7yGhO?p=preview。当您单击按钮时，第一个元素会以有弹性的动画显示/隐藏。这很好用，但问题是它下面的项目只是跳转到新的地方，这很丑陋和不和谐。
因此，如果您单击按钮，项目一滑开，然后一秒钟后项目二和三跳起来。我希望在项目一滑开时所有东西都向上滑动。如何才能做到这一点？我是否需要删除 animate.css 并编写自己的自定义动画？那将如何运作？ （我并不真正关心有弹性的动画，它应该只是滑开/回到视图中。）
【问题讨论】：
标签：
angularjs
ng-animate
animate.css
【解决方案1】：
您拥有的当前有弹性动画正在使用不会影响同级元素的 transform 属性。如果您执行动画边缘动画之类的操作，其他元素也会移动。
您可以更改目标元素上的动画方法，或者保留它并另外为目标的相邻兄弟元素设置动画。我修改了你的 Plunker，展示了后者：
http://plnkr.co/edit/hMaPgRDYC8Z0EeCs6SHQ?p=preview
*这也演示了使用隐藏的过渡和显示的关键帧。
要选择受 ng-hide 影响的兄弟旁边的相邻兄弟，请使用 + 符号创建一个 css 选择器：
.item.ng-hide-add + .item {...}
然后通过过渡/动画margin-top，剩余的项目元素也会被推动。