bootstrap 原码transition解释

Question

初学完javascript,jquery,知道自己学的很不扎实,所以就找了bootstrap的源代码,想看看别人的代码,来提升提升自己写代码的水平

于是找到了transition的原码,并进行了注释。仅供和我一样的初学者参考,写的不对的请多多指正

Code


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

//  Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡。
//+号是函数立即执行的意思。
+function ($) {
   //使用严格模式的好处
  //1.警告对象中重复的键
  // 2.不允许未声明的变量
  // 3.函数中不允许出现重复的参数
  // 4.限制arguments
  // 5.以后发现在更新
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================
  //判断浏览是否支持transition转换的插件,若支持则在动画结束时执行一些代码。否则使用另外一个事件。
  function transitionEnd() {
    //创建一个元素用于测试
    var el = document.createElement('bootstrap')

    // 创建一个对象,是为了后期区分是那种浏览器,因为不同的浏览器有不同的前缀。 
    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      // 低版本的 Chrome 和 Safari 
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }
    // 遍历这个对象的每一个键值对,然后与当前dom文档的属性进行比较,比较的方式在于,如果el。style[]属性存在,那么当前浏览器就是有这个属性的,否则就没有。如果在这个对象当中,那么就使用这个属性作为动画结束的函数,如果都没有,那么久返回一个false。过度结束事件是有兼容性的,所以专门创建一个方法,来获取每个浏览器兼容的TransitionEnd(用的应当是状态模式)
    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }
    //  IE8 不支持过度,(  ._.) 
    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  //  jQuery.fn =jQuery.prototype.
  // $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。这个函数的作用是
   /*事件名称的问题基本上解决了,但是这个事件有个问题就是有时根本不会触发,这是因为属性值没有发生变化或没有绘制行为发生。要确保每次回调都会被调用,我们增加一个定时器即可:
   所以我们要模拟事件结束*/
  $.fn.emulateTransitionEnd = function (duration) {
    // duration 参数是动画持续的时长
    // 事件是否已经触发过
    var called = false
    // $el指向this,我感觉这边就是为了防止后期函数作用域的问题,所以把this的值赋给了el
    var $el = this

    $(this).one('bsTransitionEnd', function () { called = true })
    // 表示我这个函数已经触发过,所以将called修改为true
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    // 上面的callback的意思是,如果我没有触发,我就强制性的触发,我在网上看,感觉他们说的好像都是这里就已经触发一样,实际好像不是的,实在下面的setTimeout函数里才真正使用。
    setTimeout(callback, duration)
    // 一段时间后检测是否触发,如果没有,那就强制触发。
    return this
  }

  $(function () {
    // 挂载到$.support下面,然后调用transitionEnd函数,取得当前浏览器的动画结束事件的名称
    $.support.transition = transitionEnd()
    // 如果当前浏览器不存在动画这个功能,直接就返回
    if (!$.support.transition) return
    // 否则 就调用这个函数
    // $.event 通过 jQuery.Event 构造,然后通过 jQuery.trigger 触发
    // 例如//创建一个新的jQuery事件对象 
    // var e = jQuery.Event( "click" );
    // trigger 触发事件
    // jQuery( "body" ).trigger( e );
    $.event.special.bsTransitionEnd = {
      // 首先这是个回调函数,我在网上查了很久,没有详细解释。然后我没看懂。。可能以后能接着更新,把这里的注释再次修改吧
      bindType: $.support.transition.end,
      // 绑定类型
      delegateType: $.support.transition.end,
      // 代表类型
      // 权柄事件
      handle: function (e) {
        // 取到e。target这个元素集合,判断如果有this这个元素,就执行下面的函数
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

}(jQuery);


// 想要知道过渡什么时候结束,就要监听 transitionend 事件(事件名称全是小写字母)。
// $('.circle').one('transitionend', function() {
//   alert('过渡结束啦!');
// });
// 这里使用 one 方法而不是 on 方法是为了避免 transitionend 事件多次执行。one 方法添加的事件回调只会执行一次,更多信息参考官方 API。

// 不过这只是标准的事件名称写法,在标准之前浏览器有各自的实现方式以及不同的事件名称(比如低版本的 Chrome 和 Safari 的该事件名称就叫 webkitTransitionEnd)

阅读更多
个人分类: 前端组件
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭