个人中心
gpt4 book ai didi

javascript - setTimeout、jQuery 操作、transitionend 随机执行/触发

转载 作者：数据小太阳 更新时间：2023-10-29 05:31:55 24 4
gpt4 key购买 nike

编辑:所以现在它不是随机的，看起来它总是无法从 .css() 方法执行(未进行任何更改)。仍然不要理解我可能犯的错误。

我正在尝试使用 jQuery 和 animate.css 为删除一个 div 设置动画。

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

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

$('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();
});
/* Animate.css customization  */

.animated {
  animation-duration: .3s
}
<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>

根据页面加载，什么也没有发生，有时只有第一个日志，有时只到 CSS 转换，有时就完成了。

在 Firefox 和 Chromium 上测试。

我可能误解了一些东西，因为它看起来真的很奇怪。

最佳答案

即使您为 setTimeout 和动画提供相同的持续时间值，它们的回调的执行顺序实际上并不能保证。 简化的原因如下:

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

有用的资源:

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

如果将 setTimeout 的延迟增加到一个更大的值，空元素的高度动画实际上会更频繁地发生，因为这会增加 zoomOut< 之间的差距 动画结束和代码在 setTimeout 开始，这意味着空元素很可能在我们开始转换它的高度之前就在 DOM 中。

但是，并没有真正保证确定此延迟的最小 值的方法，因为每次都可能不同。

您必须以这样一种方式编写代码，即 animationend 和 setTimeout 回调的执行顺序无关紧要。

解决方案

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

您必须注意的一件事是，您正在使用的 css 库已经将 .mdl-card 的 min-height 设置为某个值( 200px)，所以你必须根据这个属性进行转换，因为元素的高度可能小于这个值。您还希望在 height 本身上进行转换，这样您就可以在没有任何卡顿的情况下删除元素。最后，您必须在动画和过渡完成后延迟元素的移除。

这是一个可行的解决方案:

$('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();
    }
  }
});
.animated {
  animation-duration: 300ms
}
.mdl-card {
  transition: min-height 300ms, height 300ms;
}
<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>

有了 Promise，这会变得更容易一些:

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());
});
.animated {
  animation-duration: 300ms
}
.mdl-card {
  transition: min-height 300ms, height 300ms;
}
<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>

关于javascript - setTimeout、jQuery 操作、transitionend 随机执行/触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41508826/

24 4 0
文章推荐： ios - 具有内部函数和属性的 Swift 公共(public)协议(protocol)
文章推荐： javascript - 将 csurf 与 react 服务器一起使用
文章推荐： ios - 具有自动调整单元格 (estimatedSize) 和 sectionHeadersPinToVisibleBounds 的 UICollectionView 变得精神起来
文章推荐： javascript - Q.defer() 和 Promise() 的区别
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com