40th Lesson: CSS3 Transition Detailed

The transition is described in this way: Allows the CSS property values to smooth over a certain period of time, that is, to change the CSS property values with the effect of animation.

Transition consists of 4 attribute values: Transition-property: Style name; transition-duration: Duration; transition-timing-function: Easing formula Transition-delay: How long will the delay be triggered? Let's talk about these four property values in detail.

Transition-property

Transition-property is used to specify which property value of an element changes when the transition effect is performed. There are several main values: none (no attribute will get the transition effect, that is, none is set, this element does not have a transition effect, just as the transition is not set); All (as long as any one of the attributes of the element changes, there will be a transition effect, which is the default value) Property (The specific attribute name, can have multiple, separated by commas, for example: Transition-property:width,height;);

Transition-duration

The duration of the animation, in units of S, can also be Ms. We can have multiple duration values, such as: Transition-duration:1s, 1500ms, 2s;transition-property:width,height,color. where 1s corresponds to the width property change, 1500ms corresponds to the Height property change, 2s corresponds to the Color property change. The default value is 0.

Transition-timing-function

Easing formula, according to the progress of the time, to change the value of the conversion speed of the property. It has a primary value of 6:

Ease (gradually slows), default value

Linear (constant speed)

Ease-in (acceleration)

Ease-out (deceleration), the difference with ease is that the deceleration changes in different degrees.

Ease-in-out (accelerate first, then slow down)

Cubic-bezier, allows you to customize a time curve through Cubic-bezier (x1,y1,x2,y2), this property value can simulate the above 5 states, as long as the corresponding x1,y1,x2,y2 to Cubic-bezier (X1,Y1,X2, y2). These 4 values must be between [0,1], otherwise invalid.

Transition-delay

How long is the delay before the change, the unit has s,ms. The default value is 0.

For example, show how to use the following transition:

<style>

#move {

Position:absolute;

left:0px;

width:100px;

height:100px;

background:red;

font-size:14px;

}

#move: hover{ //mouse moves to the move element, it dynamically changes its three property value Background,font-size,left.

Background:green;

font-size:26px;

left:700px;

Transition:all 2s ease 0.3s;

-moz-transition:all 2s ease 0.3s;

-webkit-transition:all 2s ease 0.3s;

-o-transition:all 2s ease 0.3s;

}

</style>

The famous bootstrap animation is based on the transition. In addition, when the above animation (transition effect) is finished, a Transitionend event is triggered. This transitionend in different browsers have different wording, such as: Webkittransitionend,otransitionend and so on. So, how do we get this available event name?

The first method: dynamically creating an element with a stylesheet into the DOM tree, then changing the target style value, triggering a callback, getting the name of the event, and finally removing the element and style sheet from the DOM tree.

(function () {

var span = document.createelement ("span"); //Create an element of span

Span.id = "Chaojidan";

span.innerhtml = "Test";

var BODY = Document.body | | Document.documentelement;

var style = document.createelement ("style"); //Create an element of style

Body.appendchild (span);

Body.appendchild (style); //Add to page

style.innerhtml = "#chaojidan {color:red;opacity:0;height:1px;overflow:hidden;-moz-transition:color 0.1s;-     Webkit-transition:color 0.1s;-o-transition:color 0.1s;} "; //sets the style of the element span, as long as the color property value of the span is changed, the transition animation is triggered.

"Transitionend otransitionend otransitionend webkittransitionend". Replace (/\w+/g,function (type) { // Type is the value of each regular match

Span.addeventlistener (Type,function (e) { //The event triggered after the transition animation ends for an element span binding, there are 4 bindings.

Window.transitionend = E.type; //The browser supports which name, it executes here, and then assigns the type of event to the transitionend of the Window object.

},false);

});

SetTimeout (function () {span.style.color= "Black";}); //Perform a transition animation of the span element, spents 100ms.

SetTimeout (function () {

Body.removechild (span);

Body.removechild (style);

},1000);

})();

The second approach: start with the event constructor, and if you pass the name of the event constructor directly to the CreateEvent and do not throw a wrong, it proves that the browser supports this event.

var gettransitionend = function () {

var obj = {

"Transitionevent": "Transitionend",

"Webkittransitionevent": "Webkittransitionend",

"Otransitionevent": "Otransitionend",

"Otransitionevent": "Otransitionend"

};

VAR ret;

for (var name in obj) {

try{

var a = document.createevent (name);

ret = Obj[name];

Break

}catch () {}

}

Gettransitionend = function () { //override this method only once and return the cached result directly the next time, this is called the lazy function.

return ret;

}

return ret;

}

Finally, we use CSS transition to achieve an animated effect:

<style>

#test {

width:100px;height:100px;position:absolute;background:red;

left:0;

Transition:left 5s;

-moz-transition:left 5s;

-webkit-transition:left 5s;

-o-transition:left 5s;

}

</style>

<script>

var $ = function (ID) {

return document.getElementById (ID);

}

var el = $ ("test");

$ ("Run"). onclick = function () { //Click the Run button to trigger the transition animation effect, which moves the element test from 0 to 700, time 5s.

El.style.left = "700px";

}

$ ("Stop"). onclick = function () { //Click the Stop button to stop the transition animation.

var left = window.getComputedStyle (el,null). //Gets the current left value of the element test

El.style.left = left; When you click the Stop button when the test element is moving, the test element stops immediately.

["", "-moz-", "-o-", "-webkit-"].foreach (function (prefix) {

El.style.removeProperty (prefix + "transition"); //dom2 defines a style method that is not supported by low-version IE browsers. Only the style value on the label can be deleted here

});

}

</script>

The above example exposes transition's weaknesses, although we can stop the animation by taking the current left value and then re-assigned the means of implementation, but as long as the transition this style has not been removed, then every time we change the left this style value, Transitions animation effects occur. To remove this transition style, we can delete it only if it is written in the style property of the tag. If it is defined in an internal style (as in our example) or an external style, then it is troublesome to delete (can be deleted by Cssstylesheet object). However, if the external style is obtained across domains, then deleting the style rule will invalidate the method, meaning that the transition style value cannot be deleted.

Therefore, the use of transition to achieve animation effect, controllability is too poor, not suitable as a framework for the implementation of the animation engine.

Come on!

40th Lesson: CSS3 Transition Detailed