为了账号安全,请及时绑定邮箱和手机立即绑定

CSS过渡上的回调

/ 猿问

CSS过渡上的回调

CSS转换完成后能否获得通知(如回调)?



查看完整描述

3 回答

?
大话西游666

我知道Safari实现了一个webkitTransitionEnd回调,您可以在过渡时将其直接附加到该元素。


他们的示例(重新格式化为多行):


box.addEventListener( 

     'webkitTransitionEnd', 

     function( event ) { 

         alert( "Finished transition!" ); 

     }, false );


查看完整回答
反对 回复 2019-10-16
?
慕容708150

是的,如果浏览器支持这些功能,则转换完成时将触发一个事件。但是,实际事件在浏览器之间有所不同:


Webkit浏览器(Chrome,Safari)使用 webkitTransitionEnd

Firefox使用 transitionend

IE9 +的用途 msTransitionEnd

歌剧用途 oTransitionEnd

但是,您应该意识到,webkitTransitionEnd并不总是会触发!这使我迷住了很多次,如果动画对元素没有影响,似乎会发生这种情况。为了解决这个问题,在未按预期触发事件处理程序的情况下,可以使用超时来触发事件处理程序。有关此问题的博客文章,请访问:http : //www.cuppadev.co.uk/the-trouble-with-css-transitions/ <-500 Internal Server Error


考虑到这一点,我倾向于在看起来像这样的一段代码中使用此事件:


var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 

var elemToAnimate = ... //the thing you want to animate..

var done = false;

var transitionEnded = function(){

     done = true;

     //do your transition finished stuff..

     elemToAnimate.removeEventListener(transitionEndEventName,

                                        transitionEnded, false);

};

elemToAnimate.addEventListener(transitionEndEventName,

                                transitionEnded, false);


//animation triggering code here..


//ensure tidy up if event doesn't fire..

setTimeout(function(){

    if(!done){

        console.log("timeout needed to call transition ended..");

        transitionEnded();

    }

}, XXX); //note: XXX should be the time required for the

        //animation to complete plus a grace period (e.g. 10ms) 



查看完整回答
反对 回复 2019-10-16
?
慕田峪4524236

我正在使用以下代码,比尝试检测浏览器使用哪个特定的结束事件要简单得多。


$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 

function() {

 //do something

});

或者,如果您使用引导程序,则只需


$(".myClass").one($.support.transition.end,

function() {

 //do something

});

这是因为它们在bootstrap.js中包含以下内容


+function ($) {

  'use strict';


  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)

  // ============================================================


  function transitionEnd() {

    var el = document.createElement('bootstrap')


    var transEndEventNames = {

      'WebkitTransition' : 'webkitTransitionEnd',

      'MozTransition'    : 'transitionend',

      'OTransition'      : 'oTransitionEnd otransitionend',

      'transition'       : 'transitionend'

    }


    for (var name in transEndEventNames) {

      if (el.style[name] !== undefined) {

        return { end: transEndEventNames[name] }

      }

    }


    return false // explicit for ie8 (  ._.)

  }


  // http://blog.alexmaccaw.com/css-transitions

  $.fn.emulateTransitionEnd = function (duration) {

    var called = false, $el = this

    $(this).one($.support.transition.end, function () { called = true })

    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }

    setTimeout(callback, duration)

    return this

  }


  $(function () {

    $.support.transition = transitionEnd()

  })


}(jQuery);


查看完整回答
反对 回复 2019-10-16

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信