javascript - 没有转换时，transitionend 事件不会触发

Question

检查一下:

http://jsfiddle.net/jqs4yy0p/

JS

$('div').addClass('switch').on('transitionend', function(e){
    alert('end');
});

CSS

div {
    background-color: red;    
    /*transition: background-color 1s;    */
}

div.switch{
    background-color: blue;
}

如果您取消注释转换属性，它就可以工作，但如果没有它，则不会触发任何事件!!

因此，如果我制作一个 slider ，并且想要在过渡效果完成后预加载下一个图像，我必须依赖 CSS 中存在过渡效果的事实。如果没有，整个事情就会崩溃。

这是否会使转换变得毫无用处，因为您仍然必须将它们与 javascript 代码混合才能控制它们？

Answer 1

为了把事情搞清楚 - 事件 transitionend (或任何相关的 javascript)根本不需要使用或控制 CSS 过渡/动画(这使得它们完全独立，尽管作为旁注，CSS 过渡/动画可以使用 js 触发，这有时又是对 CSS 界面提供的基本可能性的非常有用的补充。

当您向页面添加 javascript 功能时，监听 transitionend 事件可以作为一个很好的工具，因为它可以让您的 javascript 意识到 CSS 触发的转换事件。
例如:“我想执行一些 javascript，但如果有转换(由 CSS 触发)，我想先等待它完成。”

使用类似的东西

$('div').css('transitionDuration') !== '0s'

您可以检查您的对象是否有过渡集。

QUICK DEMO (基于你的jsfiddel)

回到你的“ slider 事物”示例......只需用 js 交换图像(就可以正常工作，已经没有平滑过渡效果)并为到达者 UX 添加 CSS 过渡。脱离等式的过渡对功能的影响可能小于 CSS 的其他部分(位置、宽度、高度、不透明度...)。

也许我在这里没有看到你的问题......但恕我直言，事件/监听器的存在使你能够检测(或操纵)CSS 转换/动画，但这绝不会让这些变得无用或多余。对我来说，这听起来类似于说 CSS 伪元素是多余的，因为您只需向标记中添加其他元素...当然您可以通过任何一种方式执行...但我只是喜欢保留我的内容(html)、样式( CSS)和逻辑(JS)层是分开的(但最终取决于当前的具体问题，当然也取决于您的个人喜好)。