何か (アニメーション) が動作していますが、見栄えがよくありません。
アニメーション/スライドがトリガーされたとき。「出る」スライドが画面の左側に飛び出し、「入る」スライドを抱き締めます。
また、アニメーション中にエンドポイントをオーバーシュートした後、元に戻ります。私の ng-animate css は次のとおりです。
css:
.slide-leave, .slide-enter {
-webkit-transition: 5s linear all; /* Safari/Chrome */
-moz-transition: 5s linear all; /* Firefox */
-o-transition: 5s linear all; /* Opera */
transition: 5s linear all; /* IE10+ and Future Browsers */
/* The animation preparation code */
opacity: 0.5;
}
.slide-enter {
position: relative;
left: -100%;
}
.slide-enter.slide-enter-active {
left: 0;
opacity: 1;
}
.slide-leave {
opacity: 1;
}
.slide-leave.slide-leave-active {
position: relative;
opacity: 0;
left: 100%;
}
これは、半作業の plunkr です。「出る」ビューが「入る」ビューを抱き締めていることに注意してください。ヘッダーの黒い四角を押すと、アニメーションを開始できます。