Bootstrap入门（二十五）JS插件2：过渡效果

Posted 2020-08-11

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>

初始效果

鼠标滑过时：渐渐变宽

最终，显示文字