到 JQUERY 的 CSS3 动画淡出或消失答案

【问题标题】：CSS3 animation to JQUERY fade out or disappear到 JQUERY 的 CSS3 动画淡出或消失
【发布时间】：2014-04-01 18:17:34
【问题描述】：

我正在尝试在 css3 中制作动画，我想在动画结束时使用 jQuery 来淡入淡出（）。编写我的代码后，转换不起作用。

这是我的 css3：

.slideRight{
    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 3s; 
    -webkit-animation-duration: 3s;

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;        

    visibility: visible !important; 
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    100%{
        transform: translateX(150%);
        }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    100% {
        -webkit-transform: translateX(150%);
    }
}

这里是 jQuery：

$(document).ready(function(){
    $('#yacht').fadeTo(function(){
    $('#yacht').css('display', 'none');
});

这是 HTML：

<!--Yacht-->
    <div class="col-xs-12 col-md-2">
        <img src="images/yacht.png" class="img-responsive slideRight" id="yacht" alt="Picture of a Yacht" />
    </div>

有谁知道我做错了什么？

【问题讨论】：

你也可以发布 HTML 吗？
貌似语法错误$('#yacht').fadeTo(function(){这个函数无法正常关闭。
.fadeTo() 什么？？？请阅读文档，您缺少一些参数。或者，使用fadeOut()

标签： jquery css animation

【解决方案1】：

语法错误

$(document).ready(function(){
    $('#yacht').fadeTo(function(){
    $('#yacht').css('display', 'none');
});

应该是

$(document).ready(function(){
    $('#yacht').fadeTo(function(){
       $('#yacht').css('display', 'none');
    }); <--- here
});

总的来说，我认为你想做这样的事情

var events = 'anomationend webkitAnimationEnd oanimationend MSAnimationEnd';
$(document).ready(function(){
    $('#yacht').on(events, function(){
       $('#yacht').fadeOut();
    }); <--- here
});

这将在动画结束时发生，随着代码的进行，您可能需要在执行 fadeOut(); 之前识别动画

【讨论】：

感谢您的回答...我修复了语法问题；但是，它仍然不会在动画后淡出。

【解决方案2】：

为什么不直接使用现有动画在动画结束时淡出图像呢？您可以设置不透明度以在 90-95% 处开始动画，并将 opacity 设置为 0 在动画的 100% 处：

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }
    90% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        filter:alpha(opacity=100);
    }
    100% {
        transform: translateX(150%);
        opacity: 0;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        filter:alpha(opacity=0);
        display: none;
    }
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }
    90% {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        filter:alpha(opacity=100);
    }
    100% {
        -webkit-transform: translateX(150%);
        opacity: 0;
        -webkit-opacity: 0;
        -moz-opacity: 0;
        filter:alpha(opacity=0);
        display: none;
    }
}

http://jsfiddle.net/JckdJ/3/

【讨论】：