需要动态添加类名

Question

目前我在我正在创建的网站中使用swipper轮播。我想在每个滑动图像的标题中添加一些动画。所以我使用@ -webkit-keyframes为它。但仅限于第一张图片即时通讯这个效果。在其他图片中，内容是静态的。任何想法如何在加载后为每张幻灯片实现这一点。感谢任何帮助。谢谢......

     .carousel-content{
            width: 1200px;
            height: 100px;
         //padding: 20px;
           padding-top:200px;
           padding-left:80px;
           padding-right: 80px;
           position: absolute;
           text-align: center;
           color:white;
           font-size:40px;
           font-weight: 800;
           -webkit-animation-duration: 10s;
           animation-duration: 2s;
          -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
     }
   @-webkit-keyframes fadeInDown {
            0% {
               opacity: 0;
               -webkit-transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
         }

         @keyframes fadeInDown {
            0% {
               opacity: 0;
               transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }

      .fadeInDown {
             -webkit-animation-name: fadeInDown ;
              animation-name: fadeInDown ;
        }

HTML

<div class="swiper-container" >
    <div class="swiper-wrapper" >
        <div class="swiper-slide">
        <div class="carousel-content fadeInDown ">
           Buisness is good 
        </div>

        </div>
        <div class="swiper-slide">
        <div class="carousel-content fadeInDown ">
            Buisness is good 
        </div></div>
        <div class="swiper-slide">
           <div class="carousel-content fadeInDown">
           Buisness is good 
        </div></div>
        <div class="swiper-slide">
          <div class="carousel-content fadeInDown">
           Buisness is good 
        </div></div>
        <div class="swiper-slide" >
           <div class="carousel-content fadeInDown">
            Buisness is good 
        </div></div>
        <div class="swiper-slide">
           <div class="carousel-content fadeInDown">
            Buisness is good 
        </div></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

我的jsfiddle是https://jsfiddle.net/2ume828d/

Answer 1

你可以做这样的事情，有一些可用于swiper滑块的回调函数，你可以使用它们来切换fadeInDown类。

	   var sliderContents = document.querySelectorAll('.carousel-content');
      function removeEffect(){
      	sliderContents.forEach(function(sliderContent){
        		sliderContent.classList.remove('fadeInDown');
        })
      }
      //removeEffect();
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        loop: true,
        autoplay:4000, 
        spaceBetween: 0,
        centeredSlides: true,
        onTransitionStart: function(slider){
        	removeEffect();
          var activeSlider =  document.querySelector('.swiper-slide-active > .carousel-content ');
         activeSlider.classList.add('fadeInDown');
        },
    });    

 html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
       -webkit-font-smoothing: subpixel-antialiased;
    font-size: 14px;
    font-family: "Lato",Arial,sans-serif;
    line-height: 1.66667;
    font-weight: 300;
    color: #333333;
    margin:0px;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    
    .carousel-content{
    width: 100px;
  height: 100px;
 
  position: absolute;
//  top: 50%;
text-align: center;
color:black;
font-size:40px;
font-weight: 800;
 -webkit-animation-duration: 10s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
   @-webkit-keyframes fadeInDown {
            0% {
               opacity: 0;
               -webkit-transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
         }
         
         @keyframes fadeInDown {
            0% {
               opacity: 0;
               transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }
    
         .fadeInDown {
            -webkit-animation-name: fadeInDown;
            animation-name: fadeInDown;
         }
       


    
    
    

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Swiper Slider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">	
</head>
<body>
<div class="swiper-container" >
    <div class="swiper-wrapper" >
        <div class="swiper-slide">
        <div class="carousel-content first">
           Buisness 1
        </div>

        </div>
        <div class="swiper-slide">
        <div class="carousel-content">
            Buisness 2
        </div></div>
        <div class="swiper-slide">
           <div class="carousel-content">
           Buisness 3
        </div></div>
        <div class="swiper-slide">
          <div class="carousel-content">
           Buisness 4
        </div></div>
        <div class="swiper-slide" >
           <div class="carousel-content">
            Buisness 5
        </div></div>
        <div class="swiper-slide">
           <div class="carousel-content">
            Buisness 6
        </div></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>	
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js">
	</script>
</body>
</html>

查看文档，也许您可​​以使用可用的apis添加效果。 http://idangero.us/swiper/api/

Answer 2

我已经删除了绝对定位，以便看到发生的事情。如您所见，动画同时适用于所有不同的元素。因此，当移动到下一张幻灯片时，它看起来好像是静态的。在显示新幻灯片时，您需要动态添加类fadeInDown。

.carousel-content {
  width: 1200px;
  height: 100px;
  padding-left: 80px;
  padding-right: 80px;
  text-align: center;
  color: red;
  font-size: 40px;
  font-weight: 800;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 2s;
  animation-fill-mode: both;
}

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="carousel-content fadeInDown ">
        Buisness is good
      </div>

    </div>
    <div class="swiper-slide">
      <div class="carousel-content fadeInDown ">
        Buisness is good
      </div>
    </div>
    <div class="swiper-slide">
      <div class="carousel-content fadeInDown">
        Buisness is good
      </div>
    </div>
    <div class="swiper-slide">
      <div class="carousel-content fadeInDown">
        Buisness is good
      </div>
    </div>
    <div class="swiper-slide">
      <div class="carousel-content fadeInDown">
        Buisness is good
      </div>
    </div>
    <div class="swiper-slide">
      <div class="carousel-content fadeInDown">
        Buisness is good
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>