Bootstrap transition.js Plug-in detailed

Bootstrap transition.js Plug-in detailedtime 2015-01-27 12:12:00 Blog Park-Original essence Area Originalhttp://www.cnblogs.com/xyzhanjiang/p/4252513.html ThemesBootstrap JavaScript

Bootstrap's own JavaScript plugin is almost always animated using CSS transitions, and the transition.js is to determine whether the browser currently in use supports CSS transitions. Let's take a quick look at the CSS transitions below.

CSS transitions

CSS transitions are smooth transitions over time when CSS properties change, and using CSS pseudo-classes makes it easy to use:

{  color: #333;   transition: color 1s linear;}  {  color: #36f;}

Here the link set a 1-second color transition effect, when the mouse link to activate :hover the link state of the text color will be changed from black to blue, the mouse moved smoothly back.

Just relying on pseudo-classes to use transitions is too monotonous, using JavaScript to dynamically add deletions class to play the transition:

/*This is a round*/. Circle{Background-color:Red;Border-radius:50%;Height:100px;Margin-left:220px;transition:transform 1s linear;width:100px;}/*add left class horizontal offset 200 pixels*/. Circle.left{Transform:TranslateX ( -200px);}/*add right class horizontally offset 200 pixels*/. Circle.right{Transform:TranslateX (200px);}

JavaScript's job is to simply delete and add Class:

function ToLeft () {  $ ('. Circle '). Removeclass (' right '). AddClass (' left ');} function toright () {  $ ('. Circle '). Removeclass (' left '). addclass (' right ');}

You let it go to the left, it dare not go to the right! The example above shows how the transition begins to occur when the state of the element changes or is added class , so how do you know when the transition is over?

Transitionend Events

To know when the transition is over, listen for the transitionend event (the event name is all lowercase letters).

$(‘.circle‘).one(‘transitionend‘, function() {  alert(‘过渡结束啦!‘);});

oneThe method is used here instead of on the method to avoid transitionend multiple executions of the event. onethe event callback added by the method will only be executed once, for more information refer to the official API.

However, this is only the standard event name notation, before the standard browser has its own implementation and different event names (such as the low version of Chrome and Safari the event name is called webkitTransitionEnd ), so in order to be compatible with more browsers, a more clumsy way can be written like this:

$(‘.circle‘).one(‘transitionend webkitTransitionEnd oTransitionEnd otransitionend‘, function() {});

It's a long string, and it's a bit of a problem!

Here you can see why these are the names of the events above, and nothing msTransitionEnd like that.

In order to add event callbacks more specifically to the browser transitionend , rather than plonk themselves as above, it is necessary to first determine which event name the browser supports transitionend , depending on the name of the property that the browser supports for CSS transitions:

 var  el = document.createelement (' bootstrap '); //  Create an element to test the  if  (el.style.transition!== undefined) { //   // } else  if  (el.style.WebkitTransition!== undefined) { //   The style of the judging element. The Webkittransition property if there is a  //  The browser supports an alternative Webkittransitionend event } else  {...} 

A total of four different prefixes of attribute names are required in accordance with current mainstream browser trends:

El.style.transitionel.style.WebkitTransitionel.style.MozTransitionel.style.OTransition

The way of judging is this, nonsense is here, directly on the code, Bootstrap transition.js internal judgment function:

functionTransitionend () {//Create an element for testing  varel = document.createelement (' Bootstrap '); //integrates all major browser implementations into one object for traversing  //key is the property name  //value is the event name  varTransendeventnames ={webkittransition:' Webkittransitionend ', Moztransition:' Transitionend ', Otransition:' Otransitionend otransitionend ', Transition:' Transitionend '  }; //loop through the object above to determine if the CSS property exists   for(varNameinchtransendeventnames) {    if(El.style[name]!==undefined) {      return{End:transendeventnames[name]}; }  }  return false;}

The function can be executed to get an object {end: ‘transitionend‘} or false (meaning that the browser does not support CSS transitions), the properties of the object holds the name of the end event supported by the browser transitionend :

var transition = Transitionend ();

For example, if I use a lower version of the Chrome browser, then the object is {end: ‘webkitTransitionEnd‘} this, if you use IE 8 false , then you can add the event's callback function:

// do not add an event callback if transition is false function () {});

To align with jQuery, assign the return result to the $.support.transition top:

$.support.transition = transitionend (); // used in a similar way function () {});

Emulatetransitionend

The problem with the name of the event is basically solved, but the problem with this event is that sometimes there is no trigger at all, because the property value does not change or no drawing behavior occurs. To ensure that each callback is called, we add a timer:

$.fn.emulatetransitionend =function(duration) {varcalled =false;//whether the Transitionend event has triggered an identity  var$el = This; $( This). One ($.support.transition.end,function() {called=true;//indicates that a trigger has been  }); varcallback =function() {    if(!called) {$ ($el). Trigger ($.support.transition.end);//not triggered, forcing it to trigger    }  }; SetTimeout (callback, duration); //detects whether a trigger is triggered after a period of time  return  This;};

This method is useful for a period of time (that is, the duration of the transition transition-duration ) and transitionend forces the event to be triggered on that element if the event does not occur.

function () {}); $ (//  This time is the duration of the transition

This ensures that there will be callbacks after the transition. To here, basically almost, but $.support.transition.end disgusting ah! Can you use the event name string in the same way you would add other event callbacks, for example ‘click‘ , of course.

Custom events

$(function() {$.support.transition=Transitionend (); //The following code is executed when the transition is supported  if(!$.support.transition) {return;} $.event.special.bstransitionend={bindtype: $.support.transition.end, Delegatetype: $.support.transition.end, handle:function(e) {if($ (E.target). Is ( This)) {        returnE.handleobj.handler.apply ( This, arguments); }    }  };});

Adding an event callback can be like this:

function () {})  . Emulatetransitionend (1000);

Other

CSS animations also have an animationend event, and there are also animationstart animationiteration events that can be referenced in this way to write one yourself.

Resources

Bootstrap transition.js Plug-in detailed