javascript - Bootstrap 旋转木马放大到淡出

Question

嘿，所以我正在自定义 Bootstrap Carousel 以具有自定义过渡效果，但我很难实现它。我相信这是因为我对轮播的确切工作方式缺乏了解。无论如何，我试图实现的效果是一个简单的淡出，我发现了很多例子，不同之处在于图像会在淡出之前放大 进入下一张图片。

换句话说，图像将有一个 transition: scale(1) 到 transition: scale(1.1) 然后它将是 opacity: 0 将 opacity: 1 设置为下一张图片。

我在谷歌上随机得到了 3 张图片，只是为了玩玩，这里似乎有 2 个问题。

1. 过渡并不顺利
2. 图像会在淡出到下一张图像之前缩小。

代码笔: http://codepen.io/anon/pen/OWezyZ

我的 CSS:

.carousel-inner {
  position: relative;
  display: block;
  top: 0;
  left: 0;
}


/*
inspired from http://codepen.io/Rowno/pen/Afykb 
*/

.carousel-inner .item {
  opacity: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

.carousel-inner .item.active {
  opacity: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.item img {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  -webkit-transition: transform 10s linear;
  -moz-transition: transform 10s linear;
  -o-transition: transform 10s linear;
  transition: transform 10s linear;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.active img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  position: relative;
  top: 0;
  left: 0;
}


/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/

@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    display: block;
    opacity: 0;
    transform: scale(1) translateZ(0);
    -webkit-transform: scale(1) translateZ(0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    display: block;
    opacity: 0;
    -webkit-transform: scale(1.1) translateZ(0);
    transform: scale(1.1) translateZ(0);
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    display: block;
    opacity: 1;
    transform: scale(1.1) translateZ(0);
    -webkit-transform: scale(1.1) translateZ(0);
  }
}

/* just for demo purpose */

html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
}

img { width: 100% !important; }

这是一个相当大的挑战，因为我再次缺乏对 Bootstrap 轮播实际工作方式的“理解”。

非常感谢您的帮助，谢谢!

Answer 1

在这里Codepen

注意:注意 JavaScript 中的附加行并从 html 中删除 active 类