Question

检查出来：

JS

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

CSS

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

div.switch{
    background-color: blue;
}

如果你取消注释它的工作转换属性，但没有它就没有事件被触发!!

因此，如果我制作一个滑块，并希望在转换效果完成后预加载下一个图像，我必须依赖于css中存在转换效果的事实。如果没有，整件事就会破裂。

这不会使转换变得无用，因为你仍然需要将它们与javascript代码混合才能控制它们吗？

Answer 1

只是为了让事情顺利进行 - 事件transitionend（或任何相关的javascript）根本不需要使用或控制CSS过渡/动画（这使得它们完全独立，但作为旁注，CSS过渡/动画可以使用js触发，这有时可能是CSS界面提供的基本可能性的一个非常有用的补充。）

当您向网页添加javascript功能时，聆听transitionend事件可以作为一个很好的工具，因为它可以让您的javascript知道CSS触发的转换事件。
例如：“我想执行一些javascript，但如果有转换（由CSS触发），我想等待它先完成。”

使用类似

的内容

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

您可以检查您的对象是否有转换集。

QUICK DEMO（基于你的jsfiddel）

然后回到你的“滑块事物”示例......只需用js交换图像（将工作得很好，已经没有平滑过渡效果）并为反向UX添加CSS过渡。将等式转换为等式可能会影响功能，而不是影响CSS的其他部分（位置，宽度，高度，不透明度......）。

也许我没有在这里看到你的问题......但恕我直言，事件/听众的存在使你有可能检测（或操纵）CSS过渡/动画，绝不会使这些无用或冗余。对我而言，听起来类似于说CSS伪元素是多余的，因为你可以添加额外的元素到你的标记...当然你可以做到这两种方式......但我只想保留我的内容（html），造型（ CSS）和逻辑（JS）层分开（但最终归结为手头的具体问题，当然还有个人偏好）。

如果没有过渡，则不会触发transitionend事件

1 个答案: