Question

所以，我尝试在Bootstrap 4.0.0轮播上制作淡入淡出动画。在.active上淡化动画很好，但是动画不会发生。

我尝试了这个问题的解决方案：Bootstrap 4: Carousel Fade Transition Not Working

不同之处在于我使用的是背景而不是标签。问题是什么？谢谢你的回答！

工作代码段

.carousel.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity ease-out .7s;
}

.carousel.carousel-fade .carousel-item.active {
    opacity: 1 !important;
}

.carousel-item{
	height: 500px;
	background-repeat:no-repeat;
    background-position: center;
	background-size:cover;	
}

.slide1{
	background: green;
}

.slide2{
	background: red;
}

.slide3{
	background: yellow;
}

.slide4{
	background: purple;
}

<div id="carousel-index" class="carousel carousel-fade slide" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#carousel-index" data-slide-to="0" class="active"></li>
		<li data-target="#carousel-index" data-slide-to="1"></li>
		<li data-target="#carousel-index" data-slide-to="2"></li>
		<li data-target="#carousel-index" data-slide-to="3"></li>
	</ol>
	<div class="carousel-inner">
		<div class="carousel-item slide1 active">
			<div class="carousel-caption d-none d-md-block">
				<h3>Lorem ipsum dolor sit amet, consectetur</h3>
			</div>
		</div>
		<div class="carousel-item slide2">
			<div class="carousel-caption d-none d-md-block">
				<h3>Lorem ipsum dolor sit amet, consectetur</h3>
			</div>
		</div>
		<div class="carousel-item slide3">
			<div class="carousel-caption d-none d-md-block">
				<h3>Lorem ipsum dolor sit amet, consectetur</h3>
			</div>
		</div>
		<div class="carousel-item slide4">
			<div class="carousel-caption d-none d-md-block">
				<h3>Lorem ipsum dolor sit amet, consectetur</h3>
			</div>
		</div>
	</div>
	<a class="carousel-control-prev" href="#carousel-index" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carousel-index" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

Answer 1

这是您想要的结果吗？

.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity ease-out .7s;
  height: 500px;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
  transform: translateX(0);
  transform: translate3d(0, 0, 0);
}

.slide1 {
  background: green;
}

.slide2 {
  background: red;
}

.slide3 {
  background: yellow;
}

.slide4 {
  background: purple;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />

<div id="carousel-index" class="carousel slide carousel-fade" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-index" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-index" data-slide-to="1"></li>
    <li data-target="#carousel-index" data-slide-to="2"></li>
    <li data-target="#carousel-index" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item slide1 active">
      <div class="carousel-caption d-none d-md-block">
        <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      </div>
    </div>
    <div class="carousel-item slide2">
      <div class="carousel-caption d-none d-md-block">
        <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      </div>
    </div>
    <div class="carousel-item slide3">
      <div class="carousel-caption d-none d-md-block">
        <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      </div>
    </div>
    <div class="carousel-item slide4">
      <div class="carousel-caption d-none d-md-block">
        <h3>Lorem ipsum dolor sit amet, consectetur</h3>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel-index" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-index" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

您可以在最新的Bootstrap 4中使用该轮播。

Bootstrap 4轮播淡出动画

1 个答案: