6

動的 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コントローラーで が変更されると、コンテンツがすぐに消えます (フェードアウトではありません) 。

何か案は？

4

2 に答える 2

1

使用してみてください：

.my-content-area.ng-leave {
  -webkit-transition: all 500ms; /* Safari/Chrome */
  transition: all 500ms;
}
于 2013-11-18T16:10:42.087 に答える