javascript - 为什么事件(webkitTransitionEnd)会触发三次

Question

我的动画只改变了一个属性(字体大小)， 但是事件触发了三次。为什么？？？

CSS:

.fadein{
  font-size:2em;
  -webkit-transition:all 3s ease-in-out;
}

JavaScript

$(document).ready(function(){

  $("button").on('click',function(){
    $("div p").eq(0).addClass("fadein").on('webkitTransitionEnd',function(e){
    console.log(e);
    });
  });
});

html:

<div>
<p>toggle paragraph</p>
</div>
<button>toggle</button>

http://codepen.io/ShawnHuang/pen/LIlvr

Answer 1

它似乎确实在为 3 个属性设置动画:margin-top、font-size 和 margin-bottom:

var propertyName = e.propertyName || e.originalEvent.propertyName;
console.log(propertyName);

参见 http://codepen.io/anon/pen/Fwfty

编辑

获取所有属性有点棘手。我在 http://jsfiddle.net/ZD2fY/1/ 做了一个例子:

$.fn.onWebkitTransitionEnd = function(callback) {
  var $this = this;
  var properties = [];
  var events = [];
  var onFinished = function() {
    if (callback) {
      callback(properties, events);
    }
    $this.off('webkitTransitionEnd', onWebkitTransitionEnd);
  };
  var finishTimeout = null;
  var onWebkitTransitionEnd = function(e) {
      var propertyName = e.propertyName || e.originalEvent.propertyName;
      properties.push(propertyName);
      events.push(e);
      clearTimeout(finishTimeout);
      finishTimeout = setTimeout(onFinished, 0);
  };
  $this.on('webkitTransitionEnd', onWebkitTransitionEnd);
};

那么你可以这样调用它:

$("div p").eq(0).addClass("fadein").onWebkitTransitionEnd(function(properties, events) {
  console.log(properties, events);
});