javascript - 触发过渡结束并结束过渡

标签 javascript

大家好,我基本上是想通过调用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

即使单击button后,也可以查看过渡如何继续进行。有人可以解释为什么我无法停止过渡吗?

最佳答案

transitionend是浏览器触发的事件,您不能自己触发。它使您知道过渡已经结束,但并没有使过渡结束。

您已指定过渡为100s,因此将花费那么长时间。

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

关于javascript - 触发过渡结束并结束过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30309071/

相关文章:

javascript - 从包含字母数字的 namespace 读取JSON时出错

javascript - eslint 脚本因 meteor 运行而失败 npm eslint

javascript - ReferenceError: GM_xmlhttpRequest 未定义

javascript - 将循环变量作为参数传递给元素函数

javascript - 以正确的方式删除对象上的属性

javascript - AngularJs在HTML模板中分离数组和字符串

javascript - AngularJS — 将作用域(不带 $)注入(inject) Controller

javascript - 在新标签页中打开页面

javascript - 如何在 RactiveJS 的装饰器中访问对象

javascript - Jest : expect object not to have property