调用不同的CSS transitionEnd事件

我正在使用CSS转换来为代码的这个特定部分在滑块内为两个元素设置动画。一个是加载图像（gif），另一个是滑块。调用不同的CSS transitionEnd事件

由于有两个元素需要通过转换进行动画，所以我想要听两个不同的transitionEnd事件。一个用于加载图像，一个用于滑块。

我目前使用此代码：

base._initStage = function() { 
       base._initListeners(); 

       //checks if all images in all slides are finished loading 
       base.imagesLoaded(function($images, $proper, $broken) { 
        var $loading = globals.$pixslider.find('.loading'); 


       // bind transitionEnd on $loading element 
       // PROBLEM : This calls alert('test') which is supposed to be called after adjusting $pixslider height 
        $loading.css('opacity', 0).one(transitionEnd, function() { 
         base.loadActiveSlide(); 
        }); 
       }); 
      }; 

      base.loadActiveSlide = function() { 
       var $active = globals.$activeSlide; 

       // adjust $pixslider height depending on active slide's height 
       globals.$pixslider.height($active.height()); 

       // bind transitionEnd on $pixslider element 
       globals.$pixslider.one(transitionEnd, function() { 
        // PROBLEM : This gets called on end of loadings transitionEnd 
        alert('test'); 
       }); 

      };

我使用jQuery的。一（）方法来听transitionEnd一次，因为它如果我使用.bind（有点被多次调用）或。对（）。

问题是警告（'test'）在$ loading元素的transitionEnd被调用，这不是我想要的，因为我希望它发生在$ pixslider元素的transitionEnd上。

我没有得到有关.one（）方法的东西，或者这是transitionEnd事件的常见问题？

我使用嗅探事件的Modernizr的方式：

var transEndEventNames = { 
     'WebkitTransition': 'webkitTransitionEnd', 
     'MozTransition': 'transitionend', 
     'OTransition': 'oTransitionEnd otransitionend', 
     'msTransition': 'MSTransitionEnd', 
     'transition': 'transitionend' 
    }, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];

来源

2013-04-24 AJ Naidas

这不是与.one的问题。您只需检查事件对象在触发时的属性。另外，还有一种更快，更轻松的方式，没有modernizr。只要写：

globals.$pixslider.one('webkitTransitionEnd OTransitionEnd transitionend', function(event) { 
    console.log(event); 
    console.log(event.currentTarget); 
    // some conditional logic depending on which element is firing the event 
});

而且，我敢肯定，没有必要为MSTransitionEnd，因为IE9不支持过渡和IE10支持这些前缀的。 Modernizr在这方面是错误的。我已经和他们一起提交了一张票

来源

2013-07-18 19:33:40 Ben

调用不同的CSS transitionEnd事件

回答

相关问题