动画幻灯片动画未对齐

时间:2013-07-31 19:26:03

标签: angularjs 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%;
}

这是一个半工作的傻瓜。请注意,“离开”视图拥抱“进入”视图。您可以通过按标题中的黑色方块来启动动画。

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

0 个答案:

没有答案