首页 > Web开发 > 详细

Bootstrap入门(二十五)JS插件2:过渡效果

时间:2016-09-26 21:37:26      阅读:169      评论:0      收藏:0      [点我收藏+]

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:过渡效果

原文:http://www.cnblogs.com/hnnydxgjj/p/5910606.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!