需要動態添加類名稱

Question

目前我正在使用swipper旋轉木馬在我創建的網站中。我想爲每個滑動圖片的標題添加一些動畫。所以即時通訊使用@ -webkit-keyframes。但只有第一個圖像即時得到這個effect.In其他圖片的內容是static.Any知道該如何實現這個它loads.Appreciate任何help.Thanks後的每張幻燈片......

 .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

你可以做這樣的事情，有可用於刷卡滑塊回調函數，你可以用它們來切換fadeInDown類。

\t var sliderContents = document.querySelectorAll('.carousel-content'); 
 
     function removeEffect(){ 
 
     \t sliderContents.forEach(function(sliderContent){ 
 
     \t \t 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){ 
 
     \t 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"> \t 
 
</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> \t 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"> 
 
\t </script> 
 
</body> 
 
</html>

檢查文檔，也許你將能夠使用添加可用的API效果。 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>