引导轮播缩放过渡答案

【问题标题】：Bootstrap carousel zoom transition引导轮播缩放过渡
【发布时间】：2017-02-16 17:27:45
【问题描述】：

我在 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 触发效果会有所帮助。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap

【解决方案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);
}

享受;)

【讨论】：