jquery - JQUERY 的 CSS3 动画淡出或消失

Question

我正在尝试在 css3 中制作动画，我想在动画结束时使用 jQuery 来 fadeOut() 。编写我的代码后，转换不起作用。

这是我的 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>

有人知道我做错了什么吗？

Answer 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();

之前识别动画