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>

初始效果

滑鼠滑過時：漸漸層寬

最終，顯示文字

 

Bootstrap入門（二十五）JS外掛程式2：過渡效果