5.1.2　源码分析

动画过渡效果不是标准的插件，而是一个判断动画的工具方法，所以没有遵守JavaScript插件的标准开发步骤。Bootstrap的transition.js文件用于将浏览器是否支持动画的标记赋值给$.support.transition属性，其他插件在使用的时候可以直接从$.support.transition属性获取相应的值。transition.js源码如下所示：

  1. +function ($) {
  2.     'use strict';                                               // 严格模式
  3.     function transitionEnd() {
  4.         var el = document.createElement('bootstrap')    // 创建一个自定义标签做测试
  5.  
  6.         var transEndEventNames = {　     // 用于检测CSS3 transition结束时的回调事件
  7.             'WebkitTransition': 'webkitTransitionEnd',// Webkit浏览器事件
  8.             'MozTransition': 'transitionend',           // Mozlia浏览器事件
  9.             'OTransition': 'oTransitionEnd otransitionend',     // Opera浏览器事件
  10.             'transition': 'transitionend'               // 其他浏览器事件
  11.         }
  12.         for (var name in transEndEventNames) {
  13.             if (el.style[name] !== undefined) {
  14.                 return { end: transEndEventNames[name] } 
  15.                 // 如果支持动画事件，则返回对象字面量，如果没有，默认返回undefind
  16.             }
  17.         }
  18.         return false                                    // 解决 IE8下的bug
  19. }
  20.  
  21.     $.fn.emulateTransitionEnd = function (duration) {   // 触发动画事件
  22.         var called = false, $el = this
  23.         $(this).one($.support.transition.end, function () { called = true })
  24.         var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
  25.         setTimeout(callback, duration)                  // 根据传入的延迟毫秒数，再触发
  26.         return this
  27. }
  28.  
  29.     $(function () {
  30.         $.support.transition = transitionEnd()  // 全局赋值
  31.     })
  32. }(jQuery);

通过源码可以看出，$.support.transition属性的值是{end:事件名称}，插件在确定支持动画的情况下，给该事件绑定其他额外的处理代码，以便在触发时进行调用。示例如下：

  1. $.support.transition && this.$element.hasClass('fade')?
  2.           this.$backdrop.one($.support.transition.end, callback) : callback()

该代码的意思是如果浏览器支持动画，并且元素上也设置了启用动画（fade），则在动画结束的时候才继续执行callback代码（即在$.support.transition.end上绑定callback），否则直接执行callback代码。

有很多效果都用到了动画，动画特效本身的代码都在CSS里设置，一般都是通过元素内部定义fade样式，fade的源码如下：

  1. // 源码2346行
  2. .fade {
  3.   opacity: 0;                           /*100%透明*/
  4.   -webkit-transition: opacity .15s linear;      /*透明度，匀速变化0.15秒*/
  5.           transition: opacity .15s linear;
  6. }
  7. .fade.in {                                      /*应用in样式，表示全部打开*/
  8.   opacity: 1;                           /*完全不透明*/
  9. }

fade样式在弹窗弹出以后的源码设置如下：

  1. // 源码5109行
  2. .modal.fade .modal-dialog {
  3.   -webkit-transition: -webkit-transform .3s ease-out;  /*减速运行*/
  4.      -moz-transition:    -moz-transform .3s ease-out;
  5.        -o-transition:      -o-transform .3s ease-out;
  6.           transition:         transform .3s ease-out;
  7.   -webkit-transform: translate(0, -25%);        /*向下移动25%的距离，从而产生向下的动画视觉*/
  8.       -ms-transform: translate(0, -25%);
  9.           transform: translate(0, -25%);
  10. }
  11. .modal.in .modal-dialog {               /*页面完整显示时，回归到原始位置*/
  12.   -webkit-transform: translate(0, 0);
  13.       -ms-transform: translate(0, 0);
  14.           transform: translate(0, 0);
  15. }