Javascript CSS3动画结束技术

所以我想在社区中打开一个对话，讨论人们用来检测动画何时结束的各种技术。尤其是当淡出某些内容时（读取不透明度）

现在我不确定其他人使用了什么，但我发现使用超时等待动画结束，然后隐藏动画特别有效，就像这样（显然使用jQuery）：

其中CSS如下所示：

#someDiv {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

我知道大多数现代浏览器都实现了转换端绑定，但我非常不喜欢使用它们。这首歌似乎有点离谱，我讨厌不得不重复一遍，让听众听懂。另外，每个浏览器都触发了完全不同的事件，这会让人毛骨悚然

对目前的各种技术有什么看法？由于这是相对较新且未记录的，让我们看看人们一直在使用什么

谢谢大家！

---

-杰夫

有一个叫做

transitionend

这比使用

setTimeout

更有意义

所以你应该像

$('#someDiv').css({'opacity':0}).on('transitionend', function(e) {
    $(this).hide();
});

---

由于该事件类型的名称可能因浏览器而异，因此我编写了一个小助手：

var dummy           = document.createElement( 'div' ),
    eventNameHash   = { webkit: 'webkitTransitionEnd', Moz: 'transitionend', O: 'oTransitionEnd', ms: 'MSTransitionEnd' },
    transitionEnd   = (function _getTransitionEndEventName() {
        var retValue = 'transitionend';

        Object.keys( eventNameHash ).some(function( vendor ) {
            if( vendor + 'TransitionProperty' in dummy.style ) {
                retValue = eventNameHash[ vendor ];
                return true;
            }
        });

        return retValue;
    }());

因此，使用该代码提前条件加载正确的事件名称，然后使用

transitionEnd

变量作为

.on（）

绑定名称

---

示例：

啊，这正是我想要的。看起来更简单一点。现在我想调用document.ready中的那个helper并将值保存到某个地方吗？@gabaum10:我添加了一个示例别忘了，更改样式属性并不总是导致转换。我发现的一个问题是，你无法分辨哪个转换正在触发。如果页面上有多个转换，则可能会多次触发事件，从而导致各种不期望的效果。你是怎么处理的？嘿，詹迪，你看到我最后的评论了吗？这是否在这个问题的范围内？如果没有，我将打开一个新的，并将此标记为已关闭。

var dummy           = document.createElement( 'div' ),
    eventNameHash   = { webkit: 'webkitTransitionEnd', Moz: 'transitionend', O: 'oTransitionEnd', ms: 'MSTransitionEnd' },
    transitionEnd   = (function _getTransitionEndEventName() {
        var retValue = 'transitionend';

        Object.keys( eventNameHash ).some(function( vendor ) {
            if( vendor + 'TransitionProperty' in dummy.style ) {
                retValue = eventNameHash[ vendor ];
                return true;
            }
        });

        return retValue;
    }());