bootstrap之transition

最新推荐文章于 2020-09-09 16:28:24 发布

青松008

最新推荐文章于 2020-09-09 16:28:24 发布

阅读量690

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap 源码

本文链接：https://blog.youkuaiyun.com/u013055396/article/details/78386392

bootstrap 专栏收录该内容

24 篇文章

订阅专栏

本文从源码角度探讨Bootstrap的transition机制，包括transitionEnd事件的浏览器兼容处理、emulateTransitionEnd的定时器补偿机制以及event.special.bsTransitionEnd的jQuery事件委托。通过对这些关键部分的分析，有助于更深入地了解Bootstrap的动画功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

最近一段时间研究了下bootstrap源码，现在开始总结，先从transition(动画)开始。

二、源码

 /* ========================================================================
  * Bootstrap: transition.js v3.3.7(动画过渡)
  * http://getbootstrap.com/javascript/#transitions
  * ========================================================================
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * ======================================================================== */


 +function ($) {
   'use strict';

   // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
   // ============================================================
   // 判断浏览器是否支持哪种transitionEnd，如果不支持则返回false
   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
     var $el = this
     $(this).one('bsTransitionEnd', function () { called = true })
     // 如果没有监听到了bsTransitionEnd，那么采用定时器触发事件
     var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
     setTimeout(callback, duration)
     return this
   }

   // 初始化
   $(function () {
     $.support.transition = transitionEnd()

     if (!$.support.transition) return

     // 用于传入事件类型，来自定义事件。这样就能自己添加事件$el.one('bsTransitionEnd', function() {})，而不用$el.one($.support.transition.end, function() {})
     $.event.special.bsTransitionEnd = {
       bindType: $.support.transition.end,
       delegateType: $.support.transition.end,
       handle: function (e) {
         if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
       }
     }
   })
 }(jQuery);