Bootstrap入門（二十五）JS插件2：過渡效果

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>

初始效果

鼠標滑過時：漸漸變寬

最終，顯示文字