Bootstrap Introduction (25) JS Plugin 2: Transition effect
For a simple transition effect, simply transition.js
introduce it with the other JS files. If you're using a compiled (or compressed) version of the bootstrap.js
file, you don't have to introduce it separately.
Transition.js is transitionEnd
a basic auxiliary tool for events and a simulation of CSS transition effects. It is used by other plug-ins to detect the current browser's transition to support CSS.
Show me through the code.
First create a div with an ID, where the div ID is mydiv, the content is directly empty
<id= "mydiv"> </div>
Add some styles for him, #mydiv下的是刚打开页面时的样式, and #mydiv:hover is a mouse-over style
Width becomes four times times the original, red, 2s complete
<style>#mydiv{width:100px;Height:100px;background:Red;-webkit-transition:width 2s;transition:width 2s; }#mydiv: Hover{width:400px; } </style>
Then, write some JS code for the transition effect.
<Script>
document.getElementById ("mydiv"). AddEventListener ("Transitionend",function(e) { This. InnerHTML= "transition events, completing" }) </Script>
Initial effect
Mouse is out of date: gradually become wider
Finally, the text is displayed
Bootstrap Introduction (25) JS Plugin 2: Transition effect