css - 如何使用 ng-hide/ng-show 动画

Question

当使用 ng-hide/ng-show 切换元素的可见性时，如何在 Angular 中的元素上设置动画？

我需要添加哪些 CSS 类才能正确地为元素设置动画？

Answer 1

首先，确保您已将 ngAnimate 添加为 dependency to your app .只有用于添加/删除 ng-hide 的 CSS 属性，所以如果您正在为 ng-show 执行此操作，只需反转您的逻辑即可。 .ng-hide-add 将在元素隐藏时触发，反之亦然 .ng-hide-remove。为每个类添加一个 animation CSS 属性并使用您选择的动画。

请记住链接 CSS 属性，即类直接一个接一个地排列，而不是用空格分隔。

例如使用 -> .box.ng-hide-add 而不是 -> .box .ng-hide-add

JSFiddle