在transitionend之后向类添加css属性

Question

我正在使用css关键帧进行一些动画制作。首先我需要保持元素的不透明度为零然后在动画结束后它将是一（1）。我已经写了一些jQuery代码但仍然不起作用。

Css代码

.slider_img {
    position: absolute;
    opacity: 0;
    left: 24%;
    top: 50vh;
    animation-name: dropImg;
    animation-duration: 2s;
    animation-delay: 1s;
    transform: translateY(-50%);
}

的jQuery

$(window).ready(function() {
    $('.slider_img').on("webkitTransitionEnd", function(){
        $('.slider_img').css('opacity', 1);
    })  
});

我现在能做什么

Answer 1

您可以执行以下操作：

$(window).ready(function() {
    var sliderImg = $('.slider_img'),
        delay = sliderImg.css('animation-duration').replace("s","") * 1000;

    setTimeout(function(){
        sliderImg.css('opacity', 1);
    }, delay);  
});

Answer 2

假设您的页面加载时动画开始：

$(document).ready(function() {
    var aDuration = parseInt($('.slider_img').css('animation-duration').slice(0, -1)) * 1000;
    var aDelay = parseInt($('.slider_img').css('animation-delay').slice(0, -1)) * 1000;

    var delay = aDuration + aDelay;

    setTimeout(function() {
        $('.slider_img').css('opacity', 1);
    }, delay);
});

编辑：添加了animation-delay的延迟。

Answer 3

您的问题是，当您要查找transitionend时，您正在使用错误的事件animationend（当然，您需要所有前缀）。例如：

$('.slider_img').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() { 
    $('.slider_img').css('opacity', 1);
});