*last* CSS3 转换后的事件处理的可靠方法？

Posted 2023-02-24

【中文标题】*last* CSS3 转换后的事件处理的可靠方法？

【英文标题】：Robust way to event handle after the *last* CSS3 transition?

【发布时间】：2014-11-08 02:06:08

【问题描述】：

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

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

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

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

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

但是，我如何确保此事件句柄在最后一次转换结束时（在我的情况下为 2 秒高度转换之后）发生一次且仅一次？

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

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

【参考方案1】：

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

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 就不会再发生了。

【讨论】：

您的第二个示例确实是我要解决的问题 - 将转换放入 CSS 的部分想法是我们将样式与逻辑分开。通过在 JS 中添加不透明度和高度检查，我们现在将它们紧密耦合在一起。假设我的 UX 设计师决定“我们真的不需要缩小高度，只要不透明度淡出就足够了”。他们将 css 更改为： .hidden opacity:0;过渡：不透明度 1s 缓和；突然间你的 JS 坏了，转换永远不会被触发，因为我们在那里有一个硬编码的高度检查。

哎呀，cmets 中没有代码。该示例显示了基本上已删除的不透明度过渡。