Bootstrap插件transition源码的学习

最新推荐文章于 2024-01-12 08:15:45 发布

前端小菜鸟

最新推荐文章于 2024-01-12 08:15:45 发布

阅读量1.5k

点赞数

分类专栏：学习笔记 JavaScript Bootstrap源码阅读

本文链接：https://blog.csdn.net/learninginJAVA/article/details/49232379

版权

JavaScript 同时被 3 个专栏收录

35 篇文章

订阅专栏

学习笔记

19 篇文章

订阅专栏

Bootstrap源码阅读

8 篇文章

订阅专栏

本文深入探讨了Bootstrap的transitionEnd插件，包括其使用说明、核心思路和初始化步骤。文章指出，该插件通过自定义transitionEnd事件和emulateTransitionEnd方法确保在所有浏览器中都能正确触发过渡结束事件。同时，它还介绍了如何根据浏览器支持情况来确定transitionEnd事件，并通过设置延迟来模拟此事件。最后，总结了bsTransitionEnd事件的自定义性和通过检测元素样式来判断浏览器兼容性的技术。

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

使用说明

主要是用于

自定义transitionEnd方法，判断是否支持过渡结束事件
定义jquery的原型方法emulateTransitionEnd，保证在过渡效果完成后，一定触发transitionEnd

核心思路

通过插入元素，然后判断元素支持哪一类transitionEnd事件，从而判定当前浏览器支持的对应transitionEnd事件
通过自定义事件，简化transitionEnd的绑定
通过传入的时长，模拟transitionEnd事件

初始化

在dom树加载完后，自定义bsTransitionEnd事件

$(function () {
  // 储存当前浏览器是否支持，若支持是支持哪种transitionEnd事件
  $.support.transition = transitionEnd()

  if (!$.support.transition) return
  // $.event.special.bsTransitionEnd是用于传入事件类型，来自定义事件
  // 这样就能自己添加事件$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)
    }
  }
})

transitionEnd方法

/**
 * 通过创建并遍历元素的style判断当前浏览器是否支持transitionEnd事件
 * 及若支持，是支持哪种事件
 * @return {object} 若支持，则返回包含end属性（即对应事件）的对象。若不支持则返回false
 */
function transitionEnd() {
  var el = document.createElement('bootstrap')
  // 不同的transitionEnd事件
  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 (  ._.)
}

emulateTransitionEnd方法

/**
 * 用于兼容不支持transitionEnd事件的情况
 * @param  {number} duration 过渡时间的时长
 * @return {object}          jquery对象
 */
$.fn.emulateTransitionEnd = function (duration) {
  var called = false // transitionEnd是否已触发的标识
  var $el = this
  $(this).one('bsTransitionEnd', function () { called = true })
  // 回调函数，实现如果未触发，则强制触发
  var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
  // 在过渡结束的时间后检查是否触发
  setTimeout(callback, duration)
  return this
}