在*最后一个*CSS3转换之后，事件处理的稳健方式

Question

假设我有一个CSS类，它在几个设置中转换，具有不同的启动时间：

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

我想在完成所有转换之后处理一些逻辑。我知道有一个过渡事件：

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

但是，我如何确保这个事件处理只发生一次，在最后一次转换结束时（在我的情况下是在2s高度转换之后）？

我看到了一些涉及检查transitioned类型的例子，但这将JS与特定的CSS定义紧密结合在一起。到目前为止，我还无法想出一个能够幸存下来的JS解决方案，比如：

• 不透明度变为3秒，现在是最长的
• 引入新的宽度转换到0px超过4s
• 极端情况下，删除所有过渡（因此效果是即时的）

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时，就不会再发生这种情况。