Question

我有一个ng-include，它根据动态网址加载内容（按预期工作）。

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

当我尝试为内容的enter和leave设置动画时出现问题（根据角度文档，这些是ng-include为动画设置的两个事件）。< / p>

.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

我使用动态内容创建了this plunker，并且工作正常试着检查一下我认为你的问题可能与容器或元素的位置有关初始代码是from here。在那里你可以找到有关angularjs 1.2 +中动画的更多细节。

Answer 2

尝试使用：

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

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

2 个答案: