为什么事件（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);
});

Answer 2

你应该可以这样做

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

或者你可以使用jQuery的one();，它会在事件触发时删除事件监听器

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

这是因为您在元素的3个属性上进行了转换

或者你可以简单地这样做

 transition: font-size 300ms ease-in-out;