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函数的几个主要部分，总的来说这种动画风格非常的简约，适合作为官方网站的动画效果的，棒棒的。