0

我有一些工作(动画),但它看起来并不漂亮。

当动画/幻灯片被触发时。“离开”幻灯片弹出到屏幕左侧并拥抱“进入”幻灯片。

它还会在动画期间超出端点,然后回弹。我的 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。注意“离开”视图拥抱“进入”视图。您可以通过按标题中的黑色方块来启动动画。

http://plnkr.co/edit/FG44cpJ65S4Gr6QZpm1X?p=preview

4

0 回答 0