jQueryにカスタムアニメーションクラスを追加

Question

jQueryを使用して要素に動的に追加するカスタムアニメーションクラスをCSSで作成しました。私のカスタムアニメーションクラスは、animate.cssアニメーションが完成すると開始されます。

私が持っている問題は、私のカスタムアニメーションが再生されていないことです。私の人生にとっては、私が間違っていることを理解できません。私はdevのツールでは、クラスが私の要素に追加されているが、アニメーションが発生していないことがわかります。

カスタムフェードCSS：

.custom-fade{ 
    -webkit-animation: 3s ease 0s normal forwards 1 custom; 
    animation: 3s ease 0s normal forwards 1 custom; 
} 

@keyframes custom{ 
    0% { opacity:.5; } 
    66% { opacity:.2; } 
    100% { opacity:0; } 
} 

@-webkit-keyframes custom{ 
    0% { opacity: .5; } 
    66% { opacity: .2; } 
    100% { opacity: 0; } 
} 

@-moz-keyframes custom{ 
    0% { opacity: .5; } 
    66% { opacity: .2; } 
    100% { opacity: 0; } 
} 

のjQuery：

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
var fadeInUp = 'animated fadeIn fadeInUp'; 
var fadeOut = 'animated fadeOut'; 
var customFade = '.custom-fade'; 

$('.bg-img').addClass(fadeInUp); 

    $('.bg-img').one(animationEnd, function(){ 
     $(this).removeClass(fadeInUp).addClass('.custom-fade'); 
    }); 

Answer 1

問題は、クラスを追加です。 の代わりに'custom-fade'をaddClass()に入力する必要があります。

サンプルコード：

jQuery: 
 

 
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 
 
var fadeInUp = 'animated fadeIn fadeInUp'; 
 
var fadeOut = 'animated fadeOut'; 
 
var customFade = '.custom-fade'; 
 

 
$('.bg-img').addClass(fadeInUp); 
 

 
    $('.bg-img').on(animationEnd, function(){ 
 
     $(this).removeClass(fadeInUp).addClass('custom-fade'); 
 
    });

.custom-fade{ 
 
    -webkit-animation: 3s ease 0s normal forwards 1 custom; 
 
    animation: 3s ease 0s normal forwards 1 custom; 
 
} 
 

 
@keyframes custom{ 
 
    0% { opacity:.5; } 
 
    66% { opacity:.2; } 
 
    100% { opacity:0; } 
 
} 
 

 
@-webkit-keyframes custom{ 
 
    0% { opacity: .5; } 
 
    66% { opacity: .2; } 
 
    100% { opacity: 0; } 
 
} 
 

 
@-moz-keyframes custom{ 
 
    0% { opacity: .5; } 
 
    66% { opacity: .2; } 
 
    100% { opacity: 0; } 
 
} 
 
.bg-img{ 
 
width:200px; 
 
height:500px; 
 
background:red; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="bg-img"></div>