我有一个switcher
指令,它有一个创建新范围的方法,并$compile
在其element
上使用另一个指令替换它lister
。
例如,该lister
指令包含一个在新作用域上迭代的 ng-repeat。
我试图在新创建的lister
指令使用ng-enter
和ng-leave
类创建后立即对其进行动画处理,但它没有任何效果,或者看起来如此。
是否可以为使用动态创建的指令设置动画$scompile
?如果是这样,我错过了什么?
代码在这个 plunkr中。
我有一个switcher
指令,它有一个创建新范围的方法,并$compile
在其element
上使用另一个指令替换它lister
。
例如,该lister
指令包含一个在新作用域上迭代的 ng-repeat。
我试图在新创建的lister
指令使用ng-enter
和ng-leave
类创建后立即对其进行动画处理,但它没有任何效果,或者看起来如此。
是否可以为使用动态创建的指令设置动画$scompile
?如果是这样,我错过了什么?
代码在这个 plunkr中。
您的选择器是问题所在:-
应该是.list-directive li
因为 li 是重复的。
.list-directive li.ng-enter,
.list-directive li.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.list-directive li.ng-enter {
margin-left: 200px;
opacity: 0;
}
.list-directive li.ng-leave,
.list-directive li.ng-enter-active {
margin-left: 0;
opacity: 1;
}
.list-directive li.ng-leave-active {
margin-left: -200px;
opacity: 0;
}
或者在 上应用一个类li's
并对其应用规则。PLNKR