javascript - 触发transitionend并结束transition

Question

嘿伙计们，我基本上是试图通过调用transitionend事件来结束转换，事件触发但转换没有结束，我有点困惑，看看下面的代码:

HTML:

<div class="test">
    <button>click me</button>
</div>

JS代码:

$('button').click(function (e) {
    $('.test').trigger('transitionend');
});

$('.test').on('transitionend', function () {
    console.log('transition ended');
}); 

<强> Fiddle here

查看即使在单击按钮之后，过渡仍然是连续的。有人可以解释为什么我无法停止过渡吗？

Answer 1

transitionend 是浏览器触发的事件，您不需要自己触发它。它让您知道转换已经结束，但它不会使转换结束。

您已指定转换时间为 100s，因此需要那么长时间。

如果您希望在单击时禁用过渡，则必须在单击时添加一个类以删除过渡样式。