子指令上的Ng-animate不会运行

时间:2014-09-29 21:56:33

标签: javascript angularjs angularjs-directive css-animations ng-animate

我试图在指令中使用ng-repeat生成的子对象动画。我已成功为ng-repeats中的一个ng-stagger设置动画,因此我知道图书馆正在运作。

出于某种原因,.group类动画进入和离开,但ng-stagger也完全被忽略,但.menu-group-item永远不会获得动画,即使没有动画{{1} }}。

目前我的指令设置如此,

指令.group通过其属性menu_items

重复
groups

然后它遍历每个ul.menus.fat li.group(ng-repeat='group in groups' ng-class-even="'alt-row'") ,将它们传递给一个子指令

group.items

CSS

ul.menu-group-items(ng-show='group.items && group.items.length > 0')
  li.menu-group-item(ng-repeat='item in group.items track by item.id' ng-class-even="'alt-row'")
    menu-item(item='item')

为什么这不是动画,为什么动作错开的动画不会?我的理想目标是仅对ul.menus .menu-group-item { color: #81807e; line-height: 2.5em; padding: 0 10px; margin: 0 -10px; cursor: pointer; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } ul.menus .group.ng-enter, ul.menus .group.ng-leave, ul.menus .menu-group-item.ng-enter ul.menus .menu-group-item.ng-leave { -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; position: relative; display: block; } ul.menus .group.ng-leave.ng-leave-active, ul.menus .menu-group-item.ng-leave.ng-leave-active, ul.menus .group.ng-enter, ul.menus .menu-group-item.ng-enter { opacity: 0; } ul.menus .group.ng-enter.ng-enter-active, ul.menus .menu-group-item.ng-enter.ng-enter-active, ul.menus .menu-group-item.ng-leave, ul.menus .group.ng-leave { opacity: 1; } ul.menus .menu-group-item.ng-enter-stagger, ul.menus .menu-group-item.ng-enter-stagger, ul.menus .menu-group-item.ng-leave-stagger, ul.menus .group.ng-leave-stagger, ul.menus .group.ng-move-stagger, ul.menus .group.ng-move-stagger { -webkit-transition-delay: 10s; transition-delay: 10s; -webkit-transition-duration:0; transition-duration:0; } 内的.menu-group-item个项目进行动画处理。

0 个答案:

没有答案