bootstrap是非常棒的前端开发套件。
但是在IE浏览器里,效果没有chrome,firefox好。原因是因为最新的普及版 IE9对CSS3仍然支持不到位。
我研究了不能展现动画效果的问题。
举个例子 alert 插件。
<div class="fade in alert">
<button type="button" class="close" data-dismiss="alert">×</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.