CSS过渡 && bootstrap transition

bootstrap插件自带的动画都是用CSS3的过渡实现的，transition动画相比jQuery自带的动画有许多优点，这些动画比较平滑，使用起来比较方便和灵活，并且对资源的消耗比较少，但是也有缺点，比如动画完成时间等等。既然bootstrap插件采用了transition来进行动画效果修改，那么这样的方法还是很值得去学习一下的。

CSS transition

CSS transition是CSS样式在一定时间内从一个状态平滑地过渡到另外一个状态，我们可以使用伪类来很容易地实现这样的CSS transition。

.testRect {
  height: 200px;
  width: 200px;
  background-color: #444;
  transition: background-color 1s linear; 
}

.testRect:hover {
  background-color: #36f;
}

上面的代码可以让一个类为testRect的元素的背景色在鼠标移动到该元素上1s内按照线性变化从灰色变成蓝色。
但是如果仅仅是通过伪类实现，那么这个CSS transition也太过鸡肋了，毕竟CSS的伪类能实现的功能太少，如果我们使用JavaScript为某个DOM元素添加一个类，这个类中包含动画效果，那么在添加到这个类名的时候，就会执行这个动画效果了。例如：

.testRect {
  height: 200px;
  width: 200px;
  background-color: #444;
  transition: background-color 1s linear; 
}

.testRect.blue {
  background-color: #36f;
}

可以设置这个div的点击函数为colorChange，点击这个div矩形，就可以得到1秒之内颜色的平滑过渡。

function colorChange(){
    var className = $('.testRect').attr('class').split(' ');
    if (!className[1])
        $('.testRect').addClass('blue');
    else
        $('.testRect').removeClass('blue');
}

TransitionEnd

transitionEnd事件是在CSS过渡动画结束之后自动触发的一个事件，这个事件在bootstrap插件中起到了很大的作用，这个事件的回调函数可以完成对发生动画的DOM元素进行清理的工作。
transitionEnd事件在不同浏览器中有着不同的事件名称，所以在使用之前尽量先检测浏览器的支持情况。下面是bootstrap中测试浏览器支持的transitionEnd事件的事件名。

function transitionEnd(){
    var bs = document.createElement('bootstrap');
    var transitionEndEventNames = {
        WebkitTransition : 'webkitTransitionEnd',
        MozTransition    : 'transitionend',
        OTransition      : 'oTransitionEnd otransitionend',
        transition       : 'transitionend'
    };
    for (var name in transitionEndEventNames){
        if(bs.style[name] !== undefined)
            return {end:transitionEndEventNames[name],};
    }
    return false;  //IE8以下不支持transition，所以不会有transitionEnd事件
}

如果浏览器支持CSS transition，并且已经得到了transitionEnd事件的事件名，就可以添加对该事件的监听函数。来监听动画何时结束。

$(document).ready(function(){
    $(document).on(transitionEnd().end,function(){
        event.preventDefault();
        alert('动画完成啦~~');
    });
});

结合之前判定浏览器支持的事件名，就可以完成对于CSS过渡完成事件的监听。

emulateTransitionEnd

在bootstrap插件中，除了transitionEnd事件，插件还在jQuery的插件库中添加一个名为emulateTransitionEnd的方法，刚开始对这个方法并看不太懂（bootstrap源码的风格看的人好心酸啊喂），后来查阅了一些资料才大概搞清楚这个方法的作用。先上源码

  $.fn.emulateTransitionEnd = function (duration) {
    var called = false
    var $el = this
    $(this).one('bsTransitionEnd', function () { called = true })
    //在这里检测transitionEnd事件是否被自动触发，回调函数是否调用
    //如果调用了则设置called变量为true
    var callback = function () { 
      if (!called)   
        $($el).trigger($.support.transition.end) 
    }
    //如果没有自动触发transitionEnd事件以及回调，那么就再用trigger方法触发
    //一个duration时间后的回调函数，保证transitionEnd的回调肯定会执行
    setTimeout(callback, duration)
    return this
  }

bootstrap插件新增的这个方法，是由于transitionEnd事件有时候并不能被正常触发，所以需要手动在transitionEnd事件没有触发的时候自动触发一个事件，并且给这个事件绑定上与transitionEnd事件一样的回调函数，保证这个回调函数的执行。

这就是bootstrap transition函数的几个主要部分，总的来说这种动画风格非常的简约，适合作为官方网站的动画效果的，棒棒的。