javascript - 使用三次贝塞尔曲线更改 Bootstrap 轮播动画持续时间

Question

大家好我致力于更改 Bootstrap Slides 动画方向，我试图更改我的 Bootstrap Carousel Slides 动画，但存在一些问题:

@media all and (transform-3d),
(-webkit-transform-3d) {
  #my-carousel > .carousel-inner > .item {
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
  }
  #my-carousel > .carousel-inner > .item.next,
  #my-carousel > .carousel-inner > .item.active.right {
    top: 0;
    left: auto;
    /*default Of Bootstrap Left: 0*/
    transform: translate3d(0, 100%, 0);
  }
  #my-carousel > .carousel-inner > .item.prev,
  #my-carousel > .carousel-inner > .item.active.left {
    top: 0;
    transform: translate3d(0, -100%, 0);
  }
  #my-carousel > .carousel-inner > .item.next.left,
  #my-carousel > .carousel-inner > .item.prev.right,
  #my-carousel > .carousel-inner > .item.active {
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
#my-carousel > .carousel-inner > .active {
  top: 0;
}
#my-carousel > .carousel-inner > .next,
#my-carousel > .carousel-inner > .prev {
  top: 0;
  width: auto;
  height: 100%;
}
#my-carousel > .carousel-inner > .next {
  left: 0;
  top: 100%;
}
#my-carousel > .carousel-inner > .prev {
  left: 0;
  top: -100%
}
#my-carousel > .carousel-inner > .next.left,
#my-carousel > .carousel-inner > .prev.right {
  top: 0;
}
#my-carousel > .carousel-inner > .active.left {
  left: 0;
  top: -100%;
}
#my-carousel > .carousel-inner > .active.right {
  left: 0;
  top: 100%;
}
/*Animation Cubic Bizer*/

#my-carousel .carousel-inner > .item {
  transition-timing-function: cubic-bezier(.24,1.01,.3,.53);
  transition: 4s ease-in-out top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#my-carousel" data-slide-to="1"></li>
    <li data-target="#my-carousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
      <div class="carousel-caption">
        <h3>Caption heading 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="item">
      <img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
      <div class="carousel-caption">
        <h3>Caption heading 2</h3>
        <p>Morbi eget libero quis metus consectetur semper.</p>
      </div>
    </div>
    <div class="item">
      <img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
      <div class="carousel-caption">
        <h3>Caption heading 3</h3>
        <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

注意:请全屏运行代码片段

Answer 1

您只需删除这段代码:

transition: 4s ease-in-out top;

然后像这样制裁剪品:

#my-carousel .carousel-inner > .item {

            transition-timing-function: cubic-bezier(.23,1,.32,1);
            transition: 4s ease-in-out top;
        }

您还需要更改 carousel.Constructor.TRANSITION_DURATION:

首先，您必须使用 jQuery data() 函数获取数据持续时间值:

var itemDurVal = $(".carousel").data("duration"); 
/*get data-duration value of my carousel */

然后你可以改变幻灯片动画:

同步过渡并防止幻灯片在过渡结束前消失。

$.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;

和.item transition-duration 值必须等于carousel.Constructor.TRANSITION_DURATION 值:

$(".carousel-inner .item").css({
            '-webkit-transition-duration': itemDurVal + 'ms',
            '-moz-transition-duration': itemDurVal + 'ms',
            'transition-duration': itemDurVal + 'ms'
            });

完整代码在这里:

var itemDurVal = $(".carousel").data("duration"); /*get data-duration value of my carousel */
        $.fn.carousel.Constructor.TRANSITION_DURATION = itemDurVal;
		$(".carousel-inner .item").css({
		'-webkit-transition-duration': itemDurVal + 'ms',
		'-moz-transition-duration': itemDurVal + 'ms',
		'transition-duration': itemDurVal + 'ms'
		});

@media all and (transform-3d),
(-webkit-transform-3d) {
  #my-carousel > .carousel-inner > .item {
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
  }
  #my-carousel > .carousel-inner > .item.next,
  #my-carousel > .carousel-inner > .item.active.right {
    top: 0;
    left: auto;
    /*default Of Bootstrap Left: 0*/
    transform: translate3d(0, 100%, 0);
  }
  #my-carousel > .carousel-inner > .item.prev,
  #my-carousel > .carousel-inner > .item.active.left {
    top: 0;
    transform: translate3d(0, -100%, 0);
  }
  #my-carousel > .carousel-inner > .item.next.left,
  #my-carousel > .carousel-inner > .item.prev.right,
  #my-carousel > .carousel-inner > .item.active {
    top: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
#my-carousel > .carousel-inner > .active {
  top: 0;
}
#my-carousel > .carousel-inner > .next,
#my-carousel > .carousel-inner > .prev {
  top: 0;
  width: auto;
  height: 100%;
}
#my-carousel > .carousel-inner > .next {
  left: 0;
  top: 100%;
}
#my-carousel > .carousel-inner > .prev {
  left: 0;
  top: -100%
}
#my-carousel > .carousel-inner > .next.left,
#my-carousel > .carousel-inner > .prev.right {
  top: 0;
}
#my-carousel > .carousel-inner > .active.left {
  left: 0;
  top: -100%;
}
#my-carousel > .carousel-inner > .active.right {
  left: 0;
  top: 100%;
}
/*Animation Cubic Bizer*/

#my-carousel .carousel-inner > .item {
  transition-timing-function: cubic-bezier(.24,1.01,.3,.53);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="40000" data-duration="3000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#my-carousel" data-slide-to="1"></li>
    <li data-target="#my-carousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img alt="First slide" src="http://store6.up-00.com/2017-01/148549717954391.jpg">
      <div class="carousel-caption">
        <h3>Caption heading 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="item">
      <img alt="Second slide" src="http://store6.up-00.com/2017-01/148549717968642.jpg">
      <div class="carousel-caption">
        <h3>Caption heading 2</h3>
        <p>Morbi eget libero quis metus consectetur semper.</p>
      </div>
    </div>
    <div class="item">
      <img alt="Third slide" src="http://store6.up-00.com/2017-01/148549717985113.jpg">
      <div class="carousel-caption">
        <h3>Caption heading 3</h3>
        <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#my-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#my-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>