javascript - 在*最后* CSS3 转换之后处理事件的可靠方法？

Question

假设我有一个 CSS 类，它在多个设置中转换，启动时间不同:

.hidden {
  opacity:0;
  height:0px;
  transition:opacity 1s ease;
  transition:height 2s ease;
}

我想在所有转换完成后处理一些逻辑。我知道有一个 transitionend 事件:

$('#content').on('transitionend', function(e) {
  mandatoryLogic()
})

$('#content').addClass('hidden');

但是，我如何确保此事件句柄发生一次且仅发生一次，即在最后一次转换结束时(在我的例子中是在 2s 高度转换之后)？

我看过一些涉及检查 transitionend 类型的示例，但这将 JS 与特定的 CSS 定义紧密结合在一起。到目前为止，我无法想出一个可以生存的 JS 解决方案:

• 不透明度更改为 3 秒，现在是最长的。
• 引入了 4 秒内到 0px 的新宽度过渡
• 极端情况，移除所有转换(因此效果是即时的)

Answer 1

我不完全确定你在问什么，但如果你想确保它只发生一次，那么最初使用一个设置为 false 的变量，一旦转换发生它设置为 true。例如:

var transition = false ;
if( !transition ){
    // do what you need to do
    transition = true ;
}

如果您想确保它在所有转换完成后发生，请检查 #content 或 .hidden 的值。随心所欲。

var height = $(element).height() ;
var opacity = $(element).css('opacity') ;
var transition = false ;
if( !transition && opacity = 'wanted value' && height = 'wanted value' ){
    // do what you need to do
    transition = true ;
}

这样，将 var transition 设置为 true 就不会再发生这种情况。