Question

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

//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
}

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

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

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

但是由于我们现在正在将UI从UI中分离出来，否则其他人可能会有一个新的UI，内容隐藏是即时的，删除了CSS3过渡，并且无意中破坏了JS调用mandatoryLogicAfterHidingContent（）。

另一种情况是，我有一个盒子，并且有一个重置功能，可以将所述盒子的大小调整为50x50（带过渡），然后调用mandatoryLogicAfterResize（）。如果我两次调用重置fn，我不认为在这种情况下会发生转换事件 - 但我仍然需要强制执行LogicAfterResize两次。

在更复杂的代码库中，我还担心在我定位的特定转换之前调用其他转换。并过早地触发mandatoryLogic（）。我想这里的核心问题是，在CSS3过渡的情况下，我如何防御性地将mandatoryLogicAfterHidingContent（）事件处理程序与 my 绑定，并且只调用addClass('hidden')，就像我可以使用jQuery回调一样？

如果转换发生，那么让JS回调等待CSS3转换的强大方法是什么？

0 个答案: