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

Question

我有一个ng-include,它根据动态网址加载内容(按预期工作).

<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+ 中动画的更多详细信息。