Bootstrap入门（二十五）JS插件2：过渡效果
对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的bootstrap.js 文件，就无需再单独将其引入了。
Transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果。
通过代码啦展现一下
先创建一个有id的div，这里div的id为mydiv，内容直接为空
<div id="mydiv">
</div>
为他添加一些样式，#mydiv下的是刚打开页面时的样式，而#mydiv:hover是鼠标滑过时的样式
宽度变成原来的四倍，红色的，2s完成
<style>
#mydiv{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
#mydiv:hover{
width: 400px;
}
</style>
然后，为这个过渡效果写一些js代码
<script>
document.getElementById("mydiv").addEventListener("transitionend",function(e){
this.innerHTML = "过渡事件，完成"
})
</script>
初始效果
鼠标滑过时：渐渐变宽
最终，显示文字