3

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

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

4

2 回答 2

3

它似乎确实在为 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);
});
于 2013-07-22T14:23:54.647 回答
1

你应该可以这样做

  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;
于 2013-07-22T14:28:17.543 回答