javascript - 使用动态源在 ng-include 上保留动画

Question

我有一个 ng-include，它基于动态 url 加载内容（按预期工作）。

<ng-include class="my-content-area" src="templateUrl"></ng-include>

当我尝试对内容进行动画处理时，问题就出现enter了leave（根据角度文档，这是 ng-include 提供的用于动画处理的两个事件）。

.my-content-area.ng-enter, 
.my-content-area.ng-leave {
  transition: all 500ms;
}    
.my-content-area.ng-enter {
  opacity:0;
}
.my-content-area.ng-enter.ng-enter-active {
  opacity:1;
}    
.my-content-area.ng-leave {
  opacity:1;
}
.my-content-area.ng-leave.ng-leave-active {
  opacity:0;
}

enter正在按预期工作，但不是leave。templateUrl当我的控制器中更改时，我只是看到内容立即消失（而不是淡出） 。

有任何想法吗？

Answer 1

我用动态内容创建了这个 plunker，它工作正常。
试着检查一下。
我认为您的问题可能与容器或元素的位置有关。
最初的代码取自这里。在那里您可以找到有关 angularjs 1.2+ 中动画的更多详细信息。

Answer 2

尝试使用：

.my-content-area.ng-leave {
  -webkit-transition: all 500ms; /* Safari/Chrome */
  transition: all 500ms;
}