Practical experience of CSS3 transition specification

This article mainly describes the CSS3 transition specifications and differences in the use of different browsers, on specific solutions or how to avoid the problem of the comments can refer to another very insightful article, "All of you need to Know about CSS transitions." Alex Maccaw is talking about achieving a specific effect, and I'm going to talk about a technical background that focuses on issues not foreseen in the process of using CSS transitions.

Structure (HTML), Presentation (CSS), and Behavior (JavaScript) are not new things, but CSS can cross this line and can be applied in the short term, which is really a completely different discussion topic.

A few weeks ago, I developed a JavaScript module that, without the ability to use CSS transitions, would not be able to get the way to the transition. The actual problem is that there is no way to synchronize the two, after many tests, I can only give up. And my test results are exactly what this article describes.

First, let's say getComputedStyle () is a way to return the property values of the CSS to the browser using JavaScript. This method allows you to see "DOM level 2:getcomputedstyle ()" and "CSS level 2:computed Values".

This can be converted to a pixel value by a parameter for a property such as Font-size. However, for attribute values that can be abbreviated, such as margin, some browsers return empty. Then there are the different attribute values for the same attribute, such as the value of Font-weight bold and 700. WebKit also has a small bug that extracts the property values from the pseudo-object.

The differences between the browsers described here are January 2013 in the use of Firefox18 (Gecko), Opera 12.12 (Presto), Internet Explorer10 (Trident), Safari Browser 6.0.2 (WebKit), Chrome (WebKit) and WebKit build Nightly for Gecko and channels.

Without further ado, let's take a look at the difference between the specification and the actual situation, for convenience, I omitted the prefix of each browser. In this article I found the problem by creating a CSS3 transitions Test Suite.

1. Specify transitions

The CSS3 Transitions specification defines the following four CSS properties:

Transition-propertytransition-durationtransition-delaytransition-timing-function

Transition properties

Transition-property is used to specify that the transition effect is performed when one of the attributes of an element changes. The system default is all, which means that the browser can animate all of the transitive properties (transition-duration duration exceeds 0s), which supports a single value or a comma-separated list of values (as with all other transition-* properties).

The specification specifies that a browser should accept and save any attributes that it does not recognize. Therefore, the following example will see a padding transition that lasts for 2 seconds: <font face= "Inherit" >transition-property:foobar,padding;

Transition-duration:1s,2s;</font> the copy code is different from the specification, the above scenario resolves to transition-property:all under WebKit. and Firefox and Opera will be resolved to Transition-property:all, padding.

Transition duration

The Transition-duration property specifies the duration of a transition from the initial state to the target State. It accepts values in seconds or milliseconds (for example, 2.3S and 2300ms refer to 2.3 seconds).

Although the specification explicitly specifies that the transition value must be positive, Opera still accepts the value of -5s, at least for getComputedStyle (). Although the specification does not limit the size of attribute values, Opera and IE do not accept values below 10ms. WebKit has a small bug in getComputedStyle () execution, for example: The return value of 0.009999999776482582s supersedes 0.01s.

Transition delay Time

The Transition-delay property specifies the wait time before a transition is performed, and the same value is used. Delay can be a negative value, but this causes the animation not to smooth the transition.

IE and Opera do not accept the value of transition-duration between -10ms and 10ms. WebKit's floating point will also appear here.

The Transition-timing-function attribute specifies the time curve for the transition effect. Includes Cubic-bezier (x1, y1, x2, y2), step (, Start|end), and pre-defined cubic-bezier curve keywords, linear, ease, ease-in, ease-out and Ease-in-out. The formula behind Cubic-bezier becomes less important when using the Cubic-bezier curve Editor, which is unique to the LEA Verou. Although the cubic-bezier curve transitions smoothly, the step () function jumps to the next value at a fixed interval. This will result in a frame-wise animation, such as "Pure CSS3 Typing Animation with Steps ()".

The computed value of linear is usually expressed as Cubic-bezier (0, 0, 1, 1) except--webkit. But WebKit will still return Cubic-bezier (0.25, 0.1, 0.25, 1) instead of ease. The specification specifies that the X value must be between 0 and 1, the Y value can exceed the range, and WebKit allows X to exceed this range, while the Android browser (4.0 version) confuses the range of x and Y.

2 transition Complete

I have already mentioned the problem of the CSS transition running asynchronously. The specification mentions that the Transitionend event allows JavaScript to synchronize with the completed transition. But it is abhorrent that the code does not elaborate on this. In fact, it simply means that a single event will be terminated because the properties of the transition have completed.

The specification states that an abbreviation attribute (such as padding) should be implemented for all attributes including it (padding-top,padding-right, and so on), and it does not say which property should be named in the Transitionend event. However, even if the transitions are defined as abbreviated attributes (such as padding), gecko,trident and Presto can also achieve transitions for the sub-attributes of plain writing, such as padding-top, while WebKit blocks transitions. If you specify transition-property:padding,webkit will perform a transition for padding, but Transition-property:all will perform a new transition for padding-left. And when padding is performing the transition, the IPhone 6.0.1 Safari browser can also perform font-size and line-height transitions. <font face= "Inherit" >.EXAMPLE{PADDING:1PX;TRANSITION-PROPERTY:PADDING;TRANSITION-DURATION:1S;}

. example:hover{padding:10px;} </font> Copy Code The above CSS will trigger different transitionend under different browsers:

Gecko,trident,presto:

Padding-top,padding-right,padding-bottom,padding-left

Webkit:

Padding<font face= "Inherit" >.example {padding:1px;transition-property:all, padding;transition-duration:1s;}

. example:hover{padding:10px;} </font> Copy Code The above CSS will trigger different transitionend under different browsers:

Gecko,trident,presto,webkit:

Padding-top,padding-right,padding-bottom,padding-left

Safari 6.0.1 on IPhone:

Padding-top, Padding-right, Padding-bottom, Padding-left, Font-size, Line-height

You can specify a negative value of transition-delay to "quickly implement" the conversion. But Transition-duration:1s; Transition-delay: -1s; The conversion is performed under Gecko and WebKit and immediately jumps to the target value. And Trident and Presto will not trigger any events.

The floating point problem encountered by WebKit on getComputedStyle () also exists in Transitionend.elapsedtime, which is true for all browsers. Math.Round (Event.elapsedtime * 1000)/1000 can be repaired.

WebKit and IE Browser execution background-position, will trigger transitionend for Background-position-x and background-position-y, instead of Background-position's transitionend.

So, even if you know the transition is underway, you can't rely on existing transitionend.propertyname. Although you can write a lot of JavaScript to make up for it, you won't be able to do it even if you adopt the latest method without proper performance testing for each attribute.

3 Transition Properties

The specification lists some of the CSS properties that the browser supports for animation transitions. Of course also includes the attributes of CSS2.1. There are also new properties that can be dynamically changed, such as flexible Box Layout.

The value type of the attribute is very important. Margin-top accepts and values, but depending on the list of transitive CSS attributes, only the animation effect can be achieved. But this does not allow browser developers to avoid the value of the transition. However, the word-spacing attribute is excluded. The property includes a value, but no browser can be animated.

Setting aside the Transitionend event, if the getComputedStyle () value changes from A to B within the specified time of the transition, the property transitions from value A to value B. If there is no execution, such as "CSS property values have changed," then you might want to check the DOM carefully. The resolution of SetTimeout () is not good enough to achieve a fast transition (less than hundreds of milliseconds of duration), when requestanimationframe () is your helper. You will be alerted before redrawing, and some intermediate values are provided for your reference. In addition to opera, the rest can be supported.

Practical experience with CSS3 transition specifications