将自定义动画 class 添加到 jQuery
adding custom animation class to jQuery
我在 CSS 中创建了一个自定义动画 class,我正在使用 jQuery 将其动态添加到元素中。我的自定义动画 class 在 animate.css 动画完成后开始。
我遇到的问题是我的自定义动画没有播放,而且我终究无法弄清楚自己做错了什么。我可以在开发工具中看到 class 正在添加到我的元素中,但动画没有发生。
自定义淡入淡出 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');
});
问题出在添加class。你应该在 addClass()
.
中给出 'custom-fade'
而不是 '.custom-fade'
示例代码:
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>
我在 CSS 中创建了一个自定义动画 class,我正在使用 jQuery 将其动态添加到元素中。我的自定义动画 class 在 animate.css 动画完成后开始。
我遇到的问题是我的自定义动画没有播放,而且我终究无法弄清楚自己做错了什么。我可以在开发工具中看到 class 正在添加到我的元素中,但动画没有发生。
自定义淡入淡出 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');
});
问题出在添加class。你应该在 addClass()
.
'custom-fade'
而不是 '.custom-fade'
示例代码:
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>