動的 URL に基づいてコンテンツをロードする ng-include があります (期待どおりに動作します)。
<ng-include class="my-content-area" src="templateUrl"></ng-include>
問題は、コンテンツのenter
とをアニメーション化しようとしているときに発生leave
します (Angular ドキュメントによると、これらは ng-include がアニメーション化のために提供する 2 つのイベントです)。
.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
コントローラーで が変更されると、コンテンツがすぐに消えます (フェードアウトではありません) 。
何か案は?