Bootstrap source code learning and example: Bootstrap-Transition

Although it is based on the objective of not pure learning, it must be helpful to everyone.

Although Bootstrap has a Twitter name, it is essentially a project of two Twitter employees.

Bootstrap is not just a project. Many of its components, including the CSS and JS components, or the original less components, can only operate on other projects. However, CSS already has a merged version. We only need to import jquery to Js. So those who want to follow the learning should download the source code part of CSS here, And jquery will use 1.83.

You can also set up the following Architecture:

 
<! Doctype HTML>  
This series only focuses on its JS components. Let's take a look at the core of its animation implementation. Bootstrap selects only the transition of css3 to achieve its animation, so it does not see the effect in ie678. In addition, the CSS part is not intended to write hack, which is very cold in ie78. Therefore, the frontend of mainland China needs to think twice about how to use this framework!
 

 
The first article is to explain the bootstrap-transition.js file, you can go back to GitHub to see. I have highlighted the syntax here. I may insert something in the source code and cannot copy it directly.
 

! Function ($) {"use strict"; // strict mode introduced by ecma262v5 $ (function () {$. support. transition = (function () {var transitionend = (function () {var El = document. createelement ('bootstrap ') // create a custom tag for testing. transendeventnames = {// The callback name 'webkittransition': 'webkittransitionend' at the end of css3 transition ', 'Trans transition ': 'transitionend', 'otransition': 'otransitionend otransitionend' // opera is disgusting, and it cannot be determined. 'tra Nsition ': 'transitionend'}, name for (name in transendeventnames) {If (El. Style [name]! ==Undefined) {return transendeventnames [name] }}() return transitionend & {end: transitionend} ()} (window. jquery );
 
 
All in all, this file provides a common feature detection for other JS components in Bootstrap. Due to the limitation of css3, the special effects it provides are also very limited. The most common one is fade. This article is complete.