使用動態源在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+動畫的更多細節。

Answer 2

嘗試使用：

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