我试图在指令中使用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
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
个项目进行动画处理。