首页 > 代码库 > Bootstrap入门（二十五）JS插件2：过渡效果
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：过渡效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。