javascript - 无法让 javascript 检测 css3 动画结束

Question

我无法让我的 animationEnd 的 javascript 正常工作。

我有一个 div（“diaDiv”）在页面加载时淡入。我试图让它在它完全淡入后，将其下方的隐藏 div（“responseDiv”）更改为可见。

function displayText(){
    var element = document.getElementById('diaDiv');
    element.addEventListener('webkitAnimationEnd, document.getElementById('responseDiv').style.visibility = "visible", false);
    element.addEventListener('AnimationEnd, document.getElementById('responseDiv').style.visibility = "visible", false);
    element.addEventListener('webkitAnimationEnd, document.getElementById('responseDiv').style.visibility = "visible", false);
}

我还尝试将 responseDiv 的样式放在另一个函数中，然后简单地从事件侦听器调用该函数。

这似乎是人们正在做的工作，但我运气不佳。如果我让函数运行 onLoad()，则 div 从一开始就可见，所以我假设这是我的事件侦听器的问题。有什么建议么？

Answer 1

您缺少's ，我相信您需要function(). 尝试

function displayText(){
    var element = document.getElementById('diaDiv');
    element.addEventListener('webkitAnimationEnd', function() { 
        document.getElementById('responseDiv').style.visibility = "visible" 
    }, false);
    element.addEventListener('AnimationEnd', function() { 
        document.getElementById('responseDiv').style.visibility = "visible" 
    }, false);
    element.addEventListener('webkitAnimationEnd', function() { 
        document.getElementById('responseDiv').style.visibility = "visible" 
    }, false);
}