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