使用$ compile在新范围内新创建的指令不具有动画效果

Question

我有一个switcher指令，它有一个创建新范围的方法，并使用$compile将element替换为另一个指令lister之一。

例如，lister指令包含一个在新范围内迭代的ng-repeat。

我尝试使用lister和ng-enter类创建新指定的ng-leave指令，但它似乎没有任何效果。

是否可以使用$scompile动态创建指令的动画？如果是这样，我错过了什么？

代码位于this plunkr。

Answer 1

你的选择器是个问题： -

它应该是.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;
}

<强> Plnkr

或者在li's上应用课程并对其应用规则。的 Plnkr