如何制作这种上下滑动效果？

Question

我正在尝试制作这个幻灯片效果，就像在dropbox link slider中一样。只需向下滚动，直到你看到一个显示器，里面有一个slider，captions在右边。我试了很多，但效果不一样。我不明白这个转换是如何在ul元素上完成的。

任何帮助都非常感谢！

这是我到目前为止尝试过的：

​

.carousel-inner>.item {
  display: inline-block;
  position: relative;
  /*width: 33.33333%;*/
  bottom: 15px;
  opacity: 0;
  opacity: 0;
  height: 0;
  float: left;
  overflow: hidden;
  -webkit-transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1), visibility 450ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1), height 600ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 200ms;
  transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1) 200ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 200ms;
  transform: none !important;
}
.carousel-inner>.item.active{
  bottom: 0;
  opacity: 1;
  height: inherit;
  -webkit-transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1), opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1) 150ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 150ms;
  transition: bottom 600ms cubic-bezier(0.23, 1, 0.32, 1) 150ms, opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 150ms;
  transform: none !important;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
    <div class="row-fluid">
        <div class="span6 offset3">
            <div id="myCarousel" class="carousel slide vertical">
                <!-- Carousel items -->
                <ul class="carousel-inner">
                    <li class="active item">
                        <img src="http://placehold.it/600x400&amp;text=First+Slide">
                    </li>
                    <li class="item">
                        <img src="http://placehold.it/600x400&amp;text=Second+Slide">
                    </li>
                    <li class="item">
                        <img src="http://placehold.it/600x400&amp;text=Third+Slide">
                    </li>
                </ul>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

​

Answer 1

动画在<li>上，而不是在<ul>上

使用bootstrap的旋转木马，你应该创建一个处理动画的新类，然后触发事件"slide.bs.carousel“从当前幻灯片中删除这个类(这将”反转“转换)，然后触发事件"slid.bs.carousel”将动画类添加到新的当前幻灯片中。

请参阅http://getbootstrap.com/javascript/#carousel-events

Answer 2

所以如果我没理解错的话，你基本上需要为你的动画设置一个帧(比如dropbox上的监视器)。您可以将carousel包装在另一个div中，并给它一个边框(或者使用背景图像，如果您需要该监视器的话)。

试试这个：https://jsfiddle.net/631bjrwL/42/