Question

编辑：所以现在它不是随机的，看起来总是无法从.css（）方法执行（没有做出任何更改）。仍然没有弄到我可能犯的错误。

我试图使用jQuery和animate.css动画删除div。

问题是这个动画依赖的字面上随机执行的事件和操作。

此代码在click处理程序中运行以响应.on("click"...：

＆＃13;

$('section').on('click', 'button', function() {
  // Remove the selected card
  $(this).closest('.mdl-card')
    .addClass('animated zoomOut')
    .one('animationend', function() {
      empty_space = $('<div id="empty-space"></div>');
      empty_space.css('height', ($(this).outerHeight(true)));
      $(this).replaceWith(empty_space);
    });
  // everything is okay until now
  // setTimeOut() doesn't always execute
  setTimeout(function() {
    console.log("test1");
    // the following doesn't always happen...
    $('#empty-space')
      .css({
        'height': '0',
        'transition': 'height .3s'
          // transitionend doesn't always fire either
      })
      .one('transitionend', function() {
        $('#empty-space').remove();
        console.log("test2");
      });
  }, 300);
  // Upgrade the DOM for MDL
  componentHandler.upgradeDom();
});

＆＃13;

/* Animate.css customization  */

.animated {
  animation-duration: .3s
}

＆＃13;

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
  <link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />
</head>

<body>
  <section>
    <div class="mdl-card">
      <button class="mdl-button mdl-js-button">Close</button>
    </div>
    <p>
      Content to test the height of the div above
    </p>
  </section>
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>

＆＃13;

根据页面加载，没有任何反应，有时只有第一个日志，有时它只能进入CSS过渡，有时它完成。

在Firefox和Chromium上测试过。

我可能会误解某些东西，因为它看起来很奇怪。

Answer 1

即使您给setTimeout和动画设置相同的持续时间值，其回调的执行顺序也不会得到保证。简化原因如下：

JS本质上是单线程的，这意味着它可以一次执行1件事。它有一个事件循环，它有一堆事件队列，它们都接受诸如网络请求，dom事件，动画事件等的回调，并且在所有这些事件中，只有一个一次运行并运行到结束（{{3 }}）。由于这种单线程性的进一步复杂化，重绘和垃圾收集等事情也可能在此线程上运行，因此可能会发生额外的不可预测的延迟。

有用的资源：

这意味着，虽然您将空元素的高度转换延迟到缩小父元素之后，但由于上述因素，此延迟的持续时间并未始终得到保证。因此，当setTimeout内的回调被调用时，空元素可能不存在。

如果将setTimeout的延迟增加到更大的值，则空元素的高度动画实际上会经常发生，因为这会增加zoomOut动画结束和setTimeout开始的代码，意味着在我们开始转换其高度之前，空元素很可能会在DOM中。

然而，确定这个延迟的最小值并不是一个真正有保障的方法，因为每次它可能会有所不同。

您必须做的是以animationend和setTimeout回调的执行顺序无关紧要的方式编写代码。

<强>解决方案

首先，您不需要额外的空白空间，您可以在同一元素上执行zoomOut动画和高度转换。

您必须注意的一件事是，您使用的css库已将min-height的{{1}}设置为某个值（.mdl-card），因此您必须转换为此属性，因为元素的高度可能小于此值。您还希望在200px本身上进行转换，这样您就可以在没有任何装箱的情况下删除该元素。最后，您必须在动画和转换完成后延迟删除元素。

这是一个有效的解决方案：

＆＃13;

height

＆＃13;

$('section').on('click', 'button', function() {

  var isAnimationDone = false,
    isTransitionDone = false;

  var $item = $(this).closest('.mdl-card');

  $item
    .addClass('animated zoomOut')
    .one('animationend', function() {
      isAnimationDone = true;
      onAllDone();
    });

  $item
    .css({
      height: 0,
      'min-height': 0
    })
    .one('transitionend', function() {
      isTransitionDone = true;
      onAllDone();
    });

  function onAllDone() {
    if (isAnimationDone && isTransitionDone) {
        $item.remove();
    }
  }
});

＆＃13;

.animated {
  animation-duration: 300ms
}
.mdl-card {
  transition: min-height 300ms, height 300ms;
}

＆＃13;

使用Promises，这会变得更容易：

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<section>
  <div class="mdl-card">
    <button class="mdl-button mdl-js-button">Close</button>
  </div>
  <p>
    Content to test the height of the div above
  </p>
</section>

＆＃13;

function animate($item, animClass) {
  return new Promise((resolve) => {
    $item.addClass(`animated ${animClass}`).one('animationend', resolve);
  });
}

function transition($item, props) {
  return new Promise((resolve) => {
    $item.css(props).one('transitionend', resolve);
  });
}

$('section').on('click', 'button', function() {

  const $item = $(this).closest('.mdl-card');

  // start animation and transition simultaneously
  const zoomInAnimation = animate($item, 'zoomOut');
  const heightTransition = transition($item, {
    height: 0,
    'min-height': 0
  });

  // remove element once both animation and transition are finished
  Promise.all([
    zoomInAnimation,
    heightTransition
  ]).then(() => $item.remove());
});

＆＃13;

.animated {
  animation-duration: 300ms
}
.mdl-card {
  transition: min-height 300ms, height 300ms;
}

＆＃13;

Answer 2

作为this link（由侧边栏中的某人提供，我仍然不知道它是如何工作的？...无论如何，谢谢你）指出，setTimeout对于这种需求并不够精确。对于包含的代码来说，执行过早的时间很快就找到了大约0.3秒创建的标记。

setTimeout，jQuery操作，transitionend随机执行/触发

2 个答案: