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

【问题标题】：How to make this top bottom slide effect如何制作这种上下滑动效果
【发布时间】：2016-09-14 14:45:35
【问题描述】：

我正在尝试制作这种幻灯片效果，就像在：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>

【问题讨论】：

我的保管箱链接已损坏。
@NikhilNanjappa，对我来说它有效，我不知道为什么！ :(

标签： html css bootstrap-carousel

【解决方案1】：

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

使用引导程序的轮播，您应该创建一个处理动画的新类，然后触发事件“slide.bs.carousel”以从当前幻灯片中删除该类（这将“反转”过渡），然后触发事件“slide.bs.carousel”。 bs.carousel" 将动画类添加到新的当前幻灯片。

见http://getbootstrap.com/javascript/#carousel-events

【讨论】：

不是动画，而是变形！查看我提供的链接，检查一下，您会发现他们在 ul 元素中使用了转换来制作幻灯片。
那么我不明白你的问题，transformX 允许 ul 显示一张幻灯片，仅此而已。对此没有影响。
但是，他们是怎么做到的？没有那个变换，我就无法达到那个效果！ :(
其实可以，对transformX没有任何影响。
哦，他们只是这样做：var position = 0; $('.arrow').on('click',function() { if(position === 99.99%) { position = 0; } else { position += 33.33%; } $('.my-carousel').css({transform: "translateX('+ position +')"}); } 这个 sn-p 并不完美，但就是这样

【解决方案2】：

所以，如果我理解正确的话，你基本上需要一个动画帧（就像 Dropbox 上的监视器一样）。您可以将 carousel 包装在另一个 div 中并给它一个边框（或使用背景图像，如果您需要该监视器）。

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

【讨论】：

我的颜值没问题，再看我的问题！我要求的是幻灯片效果，而不是框架！