ダイナミックにクラス名を追加する必要があります

Question

現在、私は作成しているウェブサイトにswipperカルーセルを使用しています。各スライド画像のキャプションにアニメーションを追加したいと思います。私は@ -webkit-keyframes for it.Butを使用していますコンテンツだけが後にすべてのスライドloads.Appreciate任意のhelp.Thanksのためにこれを実装する方法をstatic.Anyの考えである。このeffect.In他の画像を取得する第一の画像IMのための...

 .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クラスを切り替えるためにそれらを使用することができます。

\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>