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高度转换之后）？

我已经看到了一些涉及检查transitionend类型的示例，但这将JS与特定的CSS定义紧密结合在一起。到目前为止，我还没有想出一个能够存活下来的JS解决方案：

不透明度变为3s，现在是最长的。
新的宽度过渡到4ps引入的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时，它不会再次发生。

在* last * CSS3过渡后，事件句柄的强大方式？

1 个答案: