2

在过去使用 JS 转换时，可以通过回调指定转换后发生的某些行为。例如

//jQuery
function hideTheContent() {
    $('#content').fadeOut(1000,function() {
      mandatoryLogicAfterHidingContent();
    });
}

现在有了 CSS3 过渡，我们可以做这样的事情。

//CSS
#content {
  opacity:1;
  transition: opacity 1s;
}

.hidden {
  opacity:0;
  transition: opacity 1s;
}

//jQuery
function hideTheContent() {
    $('#content').addClass('hidden');
    // still need to run mandatoryLogicAfterHidingContent
}

我知道新的 transitionend 事件，所以假设我们可以这样做：

//jQuery
function hideTheContent() {
    $('#content').on('transitionend', function(e) {
      mandatoryLogicAfterHidingContent()
    })

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

但由于我们现在将 JS 从 UI 中分离出来，因此其他人可能会提供一个即时隐藏内容的新 UI，删除 CSS3 过渡，并无意中中断对强制逻辑后隐藏内容（）的 JS 调用。

另一种情况，假设我有一个盒子，并且有一个重置函数将所述盒子的大小调整为 50x50（带过渡），然后调用强制逻辑后调整（）。如果我两次调用 reset fn ，我认为在这种情况下不能保证触发转换事件 - 但我仍然需要强制LogicAfterResize 两次运行。

在更复杂的代码库中，我还担心在我所针对的特定转换之前调用其他转换。并过早触发强制逻辑（）。我想这里的核心问题是，使用 CSS3 转换，我如何防御性地将mandatoryLogicAfterHidingContent() 事件处理程序与我的并且只有我的调用addClass('hidden')联系起来，就像我可以使用 jQuery 回调一样？

4

0 回答 0