将自定义动画类添加到 jQuery答案

【问题标题】：adding custom animation class to jQuery将自定义动画类添加到 jQuery
【发布时间】：2017-07-03 14:09:08
【问题描述】：

我在 CSS 中创建了一个自定义动画类，我使用 jQuery 将其动态添加到元素中。一旦 animate.css 动画完成，我的自定义动画类就会开始。

我遇到的问题是我的自定义动画没有播放，而且我一生都无法弄清楚我做错了什么。我可以在开发工具中看到该类已添加到我的元素中，但动画没有出现。

自定义淡入淡出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');
    });

【问题讨论】：

您是否故意放置“一个”来附加事件处理程序？ $('.bg-img').one(...)
@eeya 我认为这是一个错字。他想写$('.bg-img').on(...)

标签： jquery css-animations animate.css

【解决方案1】：

问题在于添加类。您应该在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>

【讨论】：