css – Bootstrap 4 Alpha 6垂直旋转木马

在JSFIDDLE上查看我的演示

我的问题是旋转木马滑梯的非向上流体运动.幻灯片从底部上升,但在结束时不再继续 – 相反消失.

我正在构建这个代码来编译使用BS3执行此操作的旧方法,并尝试尽可能地匹配新的CSS类.这是我的代码,任何帮助解决这个谜团将非常感激.

HTML

CSS

/* Just for Example Purposes */body {  background: #333}/* Vertical Carousel */.vertical .carousel-inner {  height: 100%;}.carousel.vertical .carousel-item {  -webkit-transition: 0.6s ease-in-out top;     -moz-transition: 0.6s ease-in-out top;      -ms-transition: 0.6s ease-in-out top;       -o-transition: 0.6s ease-in-out top;          transition: 0.6s ease-in-out top;}.carousel.vertical .active {   top: 0;}.carousel.vertical .carousel-item-next {   top: 100%;}.carousel.vertical .carousel-item-prev {   top: -100%;}.carousel.vertical .carousel-item-next.carousel-item-left,.carousel.vertical .carousel-item-prev.carousel-item-right {   top: 0;}.carousel.vertical .active.carousel-item-left {   top: -100%;}.carousel.vertical .active.carousel-item-right {   top: 100%;}.carousel.vertical .carousel-item {  left: 0;}

因此,不是旋转木马滑动闪烁或只是消失,然后重新出现,我希望它们自然向上流动,就好像隐藏的图像没有保持对齐,因为默认情况下它们在Bootstrap中.

提前致谢！！！

Bootstrap 4动画过渡使用变换,所以我认为使用translate将方向更改为垂直以及每张幻灯片的位置会更好……

演示：http://www.codeply.com/go/PgxKT3h6x6

.vert .carousel-item-next.carousel-item-left,.vert .carousel-item-prev.carousel-item-right {    -webkit-transform: translate3d(0, 0, 0);            transform: translate3d(0, 0, 0);}.vert .carousel-item-next,.vert .active.carousel-item-right {    -webkit-transform: translate3d(0, 100%, 0);            transform: translate3d(0, 100% 0);}.vert .carousel-item-prev,.vert .active.carousel-item-left {-webkit-transform: translate3d(0,-100%, 0);        transform: translate3d(0,-100%, 0);}

Vertical Carousel Demo