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

时间:2016-10-30 07:02:53

标签: css angularjs css-animations

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

为了正确地为元素设置动画,我需要添加哪些CSS类?

2 个答案:

答案 0 :(得分:0)

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

请记住链接CSS属性,即类直接在彼此之后,不用空格分隔。

e.g。使用 - > .box .ng-hide-add没有 - > sudo start shiny-server

JSFiddle

答案 1 :(得分:0)

在模块中注入[' ngAnimate']。

angular.module('animateApp', ['ngAnimate'])

我创建了一个示例代码: -

http://plnkr.co/edit/QU7VpzBLzjgHd8aqFqv7?p=preview

希望这会有所帮助。