40

我需要在允许函数再次重复之前检测 CSS 转换是否完成，以防止弄乱边距。

所以我怎么会有类似的东西

if (transitionend == true) {
  // do stuff
} else {
  // do nothing
}
4

5 回答 5

96

下面的代码将触发 $element 变量中任何元素的 transitionend 事件。有四种不同的事件名称，因为我相信这些名称涵盖了所有跨浏览器的不一致。将“//您的事件处理程序”注释替换为您希望在触发事件时运行的任何代码。

$element.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    // your event handler
});
于 2012-11-12T14:33:23.020 回答
7

我认为此链接可能对您有所帮助。

转换完成时会触发一个事件。在 Firefox 中，事件为 transitionend，在 Opera 中为 OTransitionEnd，在 WebKit 中为 webkitTransitionEnd。

el.addEventListener("transitionend", updateTransition, true);
于 2011-08-20T21:09:56.337 回答
2

使用jQuery 数据将有状态数据附加到元素。使用布尔值来“阻止”事件的发生，并在 transitionend 完成后翻转布尔变量。使用 xram 的代码同时连接所有跨浏览器的 transitionend 事件。

所以对于你的例子......

  1. onclick 设置 this.data('transitioning', true)
  2. 当 transitionend 触发时，设置 this.data('transitioning', false)
  3. 如果 this.data('transitioning') == true，则不执行动画。这是在您的点击事件中捕获并检查的。
于 2013-01-23T16:03:30.583 回答
1

您可以创建一个方法，该方法将记住上次调用过渡结束时的情况，因此只触发一次回调。

function transitionEndsOnce($dom, callback) {
  var tick = Date.now();
  $dom.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(e) {
    var diff = Date.now() - tick;
    tick = Date.now();
    if (diff > 20) { // this number can be changed, but normally all the event trigger are done in the same time
      return callback && callback(e);
    }
  });
}

然后以这种方式简单地使用它

transitionEndsOnce($('...'), function(e){
  console.log('transition ends once');
});
于 2015-09-29T08:13:07.923 回答
1

我注意到类似的问题，例如“我如何捕捉 touchend 事件？” 还是“鼠标事件”？等等

这些观点都是相似的

  1. 复数：即使我们期望被单个事件触发，处理程序也会被触发多次

  2. depth：事件在我们的处理程序捕获它们之前在树中更深地冒泡。

例子：

  1. 在同时具有鼠标和触摸屏的设备中， atouchstart可以后跟 a mousedown，反之亦然，

  2. 出于类似的原因，atouchend可以跟在 a 之后，mouseup

  3. aanimationstart之后可以跟随许多其他类似的事件，具体取决于您编写 css 的方式，

  4. 由于上述原因， aanimationend之后也可能出现许多类似的事件。

如果我们需要为一组类似的事件触发一次我们的处理程序，即由单个动作产生的事件，例如按下某物的人。我们需要引入事件锁并使用 2 个处理程序，一个在事件开始时使用，一个在事件结束时使用，即使我们不需要或不想要附带事件的处理程序。

如您所料，锁可以是树中更高父节点的属性。

对于臭名昭著的事件夫妇：animationstart-animationend这样的功能可以是：

var oneTransition = (function(){
   var $parent,
       type,
       callback,
       unlockCallback,
       newCallback,
       start = 'webkitTransitionStart otransitionstart oTransitionStart msTransitionStart transitionstart',
       end = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';

   unlockCallback = function(){
      $parent.data('oneTransitionLock', false);
   };

   newCallback = function(e){
      if($parent.data('oneTransitionLock'))
         return;
      else
         $parent.data('oneTransitionLock', true);

      callback(e);
   };

   return function(){
      var args = Array.prototype.slice.call(arguments, 0);

      $parent = $(args[0]);     // 1st arg
      type = args[1];           // 2nd arg
      callback = args[2];       // 3rd arg

      if((args.length < 3) || ((type != 'start') && (type != 'end')) || (typeof(callback) != 'function'))
         return;

      $parent.off(start).off(end);
      if(type == 'start'){
         $parent.data('oneTransitionLock', false);
         $parent.on(start, newCallback);
         $parent.on(end, unlockCallback);
      }else if(type == 'end'){
         $parent.on(start, unlockCallback);
         $parent.on(end, newCallback);
      }
   }
})();

你可以这样称呼它：

oneTransition(node, 'start' or 'end', funcion(){...});

有趣的部分是它可以在动画开始或结束时运行：

  1. 第一个参数。节点引用，

  2. 第二个参数。一个字符串，代表我们回调的事件和

  3. 第三个参数。我们实际的回调。

jsFiddle

于 2018-11-05T13:27:51.287 回答