javascript - 在 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

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

$(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 的延迟。