我有一些工作(动画),但它看起来不漂亮。
触发动画/幻灯片时。 “离开”幻灯片弹出到屏幕左侧并拥抱“进入”幻灯片。
它还会在动画期间超过端点然后快照。我的动画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%;
}
这是一个半工作的傻瓜。请注意,“离开”视图拥抱“进入”视图。您可以通过按标题中的黑色方块来启动动画。