bootstrap在IE9里没有动画效果的原因

bootstrap是非常棒的前端开发套件。

 

但是在IE浏览器里，效果没有chrome,firefox好。原因是因为最新的普及版 IE9对CSS3仍然支持不到位。

 

我研究了不能展现动画效果的问题。

 

举个例子 alert 插件。

 

 

<div class="fade in alert">

<button type="button" class="close" data-dismiss="alert">&times;</button>

<strong>Warning!</strong> Best check yo self, you're not looking too good.

</div>

 

在chrome下，点击 X 可以渐隐整个alert提示。但是在IE下就不能。

我在查看源代码前，一直认为bootstrap的动画效果是依靠jquery的。但是实际却是依靠css3。

 

!function ($) {

  "use strict"; // jshint ;_;


 /* ALERT CLASS DEFINITION
  * ====================== */

  var dismiss = '[data-dismiss="alert"]'
    , Alert = function (el) {
        $(el).on('click', dismiss, this.close)
      }

  Alert.prototype.close = function (e) {
    var $this = $(this)
      , selector = $this.attr('data-target')
      , $parent

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
    } else {
		alert('fuck');
	}

    $parent = $(selector)

    e && e.preventDefault()

    $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())

    $parent.trigger(e = $.Event('close'))

    if (e.isDefaultPrevented()) return

    $parent.removeClass('in')

    function removeElement() {
      $parent
        .trigger('closed')
        .remove()
    }

    $.support.transition && $parent.hasClass('fade') ?
      $parent.on($.support.transition.end, removeElement) :
      removeElement()
  }


 /* ALERT PLUGIN DEFINITION
  * ======================= */

  var old = $.fn.alert

  $.fn.alert = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('alert')
      if (!data) $this.data('alert', (data = new Alert(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  $.fn.alert.Constructor = Alert


 /* ALERT NO CONFLICT
  * ================= */

  $.fn.alert.noConflict = function () {
    $.fn.alert = old
    return this
  }


 /* ALERT DATA-API
  * ============== */

  $(document).on('click.alert.data-api', dismiss, Alert.prototype.close)

}(window.jQuery);

 

看遍以上这个插件没发现任何jquery.fadeIn()函数的踪影。

其实，实际起到fadeIn作用的是 $parent.removeClass('in'),即去掉div的in样式表。我们看到div有fade和in两个样式表。为什么一旦去掉in就会有渐隐效果呢(在chrome里)?

我们看看bootstrap.css里的

 

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
     -moz-transition: opacity 0.15s linear;
       -o-transition: opacity 0.15s linear;
          transition: opacity 0.15s linear;
}

.fade.in {
  opacity: 1;
}

 这里可以看到chrome运用css3的-webkit-transition的样式来达到这一目的，将 in 去掉后，只剩fade,则-webkit-transition执行 linear动作，将透明度以0.15s的速度降为0,这样就实现了渐隐效果。

 

同样的，我们还可以看到collapse插件的高度渐减效果，也是用css3实现

.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
     -moz-transition: height 0.35s ease;
       -o-transition: height 0.35s ease;
          transition: height 0.35s ease;
}

 

而一切的一切，都是因为fuck IE不支持transition这个css3特性。和bootstrap用没用jquery无关。

 

最后我想说，chrome must be winner for freedom.