Bootstrap Introduction (25) JS Plugin 2: Transition effect

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