Bootstrap 过渡效果

过渡插件（transition.js）并不是独立可见的组件，而是给模态框、警告框、折叠等插件提供"淡入淡出"平滑动画的底层工具。只要元素带 fade 类并声明了 CSS 过渡，相关插件就会自动播放动画。

随包引入

过渡插件默认包含在 bootstrap.js / bootstrap.min.js 中，不需要单独写初始化代码。若只想加载它，可单独引用：

<script src="bootstrap/js/transition.js"></script>

说明：单独引入时仍须先引入 jQuery，并放在其他需要动画的插件之前。

配合模态框使用

给模态框加 fade 类，打开/关闭时就会出现淡入淡出效果：

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">对话框内容</div>
    </div>
</div>

显示效果：点击触发按钮后，对话框不是瞬间出现，而是在几百毫秒内渐渐浮现。

配合警告框使用

警告框加 fade 类后，关闭动画同样平滑：

<div class="alert alert-warning fade in">
    这是一条警告，点击右上角 × 可关闭我。
</div>

显示效果：整个警告条以淡出方式逐渐消失，而不是突然不见。

过渡原理与自定义

动画本质是 CSS：fade 让元素初始透明，插件在适当时机添加类触发过渡。你也可以自定义过渡参数：

.fade {
    opacity: 0;
    transition: opacity .15s linear;
}
.fade.in {
    opacity: 1;
}

说明：in 类表示"显示中"，Bootstrap 多个插件的显隐都依赖这一对类名切换。

小结：过渡插件为交互组件统一提供淡入淡出能力，平时几乎感觉不到它的存在；只要记住给目标元素加上 fade 类，动画就会自动出现。