Question

我有一个显示问题的基本插件：http://plnkr.co/edit/L3rhEIdrnTucG0M7yGhO?p=preview。当您单击按钮时，第一个元素将显示/隐藏有一个有弹性的动画。这样可以正常工作，但问题是它下方的物品只是跳到了一个非常丑陋和刺耳的新地方。

所以，如果你点击按钮，第一项就会滑开，然后是第二项，第二项和第三项会跳起来。当第一项滑落时，我希望一切都能向上滑动。如何才能做到这一点？我是否需要删除animate.css并编写自己的自定义动画？那会怎么样？（我真的不关心这个有弹性的动画，它应该滑开/回到视野中。）

Answer 1

您拥有的当前有弹性动画使用的转换属性不会影响同级元素。如果您做了类似动画边距的操作，其他元素也会移动。

您可以更改目标元素上的动画方法，也可以将其保留并为目标的相邻兄弟添加动画效果。我修改了你的Plunker，证明了后者：

*这也是演示中使用隐藏和关键帧上的过渡的演示。

要选择受ng-hide影响的兄弟旁边的相邻兄弟，请使用+符号创建一个css选择器：

.item.ng-hide-add + .item {...}

然后通过转换/动画margin-top，其余的项目元素也会被推动。