javascript - Bootstrap 轮播缩放过渡

Question

我在 Bootstrap 轮播中有图像，作为过渡效果，我想缩放事件图像，然后显示下一张图像。像这样 - http://cssdeck.com/labs/solitary-css3-slider-zoom-transition ，但仅限于缩放事件幻灯片。

我试图更改 Bootstrap 的 css，但这不会缩放事件幻灯片，而是下一张。

.carousel-inner .item{
  transition-property: transform;
  transform: scale(1);
}

.carousel-inner .item.active{
  transform: scale(1.5);
}

/* turning off the default transition effect */
.next,
.prev,
.active.left,
.active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}

问题是当 slide.bs.carousel 事件发生时，下一张幻灯片已经处于事件状态，我希望在切换到另一张轮播幻灯片之前获得缩放效果。

也许在显示下一张幻灯片之前用 js 触发效果会有所帮助。

我怎样才能做到这一点？

Answer 1

这是您需要的:http://codepen.io/statix/pen/dNLMXB

简单地创建内部带有响应图像和此过渡的轮播元素:

.carousel-holder .carousel-item {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.carousel-holder .carousel-item .img-responsive {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    transform: perspective(100vw) translateZ(15vw);
    opacity: 0;
}

.carousel-holder .carousel-item.active .img-responsive {
    opacity: 1;
    transform: perspective(100vw) translateZ(0);
}

享受 ;)