"Turn" CSS3 experience in practical use of transition specifications

Translated from: http://blog.jobbole.com/56243/

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-property
• Transition-duration
• Transition-delay
• Transition-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:

12	transition-property:foobar,padding;transition-duration:1s,2s;

Unlike 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 indicates that an abbreviation attribute (such as padding) should implement a transition for all properties including it (Padding-top,padding-right, and so on), and it does not say which property should be specifically 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.

12	.example{padding:1px;transition-property:padding;transition-duration:1s;}.example:hover{padding:10px;}

The above CSS will trigger different transitionend under different browsers:
Gecko,trident,presto:
Padding-top,padding-right,padding-bottom,padding-left
Webkit:
Padding

12	.example {padding: 1px;transition-property: all, padding;transition-duration:1s;}.example:hover{padding:10px;}

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.

4 Precedence of transition properties
The Transition-property specification allows multiple transitions of a single property, and if a single attribute is specified more than once in the transition properties, the transition is achieved by the value given by the duration, delay, and time curve. Therefore, we can achieve padding transition lasts 1 seconds, padding-left transition lasts 2 seconds; Or use Transition-property:all to define default property types and reset specific properties.
In Firefox and IE, none of this is a problem. But opera will confuse the order of precedence. It argues that Padding-left is more specific than padding and all, rather than simply using the last attribute.

The biggest problem is webkit. If an attribute is specified more than once, it will make several transitions. If you want WebKit to crash and try to run transition-property:padding with transition-duration:0.1 seconds, Padding-left,webkit will perform at least two transitions. But more interestingly, Transitionend can make hundreds of single transitions.

5 Auto's transformation
The auto value in the CSS property is adaptive to the width, and if the block-level element is set to Width:auto, the parent's width is inherited. Sometimes you need to change from Width:auto to a specific width, and you need to transition that change. Of course, this specification does not enforce or deny that auto values can be used for transitions.

Firefox,ie and Opera cannot transition from or to auto values. There is a little exception to Z-index under IE, but that's all. On the other hand, WebKit can transition from and to any CSS property that can almost accept auto values. WebKit doesn't like clip very much; Because of this property, it only throws a transitionend transition, and no intermediate values or states are generated or displayed during the transition.
There are some differences for other properties, such as width and height,webkit. If the Width:auto transitions to a width of 300px and then transitions to 100px, the transition does not shrink from 300 to 100 pixels. It will increase from 0 to 100 pixels.

For a complete list of compatibility, you can view "CSS animatable Properties."

6 implicit transitions
Implicit transitions occur when a property change causes another property to be transitioned, or when you want to change a property in a parent element, which results in the transition of the child element whether it is an inherited transition or a subordinate attribute. FONT-SIZE:18PX, padding:2em-–padding will be calculated as 2xfont-size, and EM is 36 pixels.

There are various relative value types:, EM, REM, VH, VW and so on. Using a relative value, such as Padding:2em, allows the browser to recalculate the Getcomputedvalue () of the property, and each strain amount, such as font-size, will change. Changes in calculation styles will in turn lead to padding transitions. This transition is defined as an "implicit transition" because the Padding property value has not been modified.

Most browsers implement this implicit transition. In addition to IE 10, an implicit transition is performed only on the Line-height property. In addition to Vertical-align, Webkit can perform an implicit transition for all other properties. In addition to the font relative property values, there are width relative property values (typically), relative property values (such as VH and VW), default initial values (Column-gap:1em in opera), and "CurrentColor". All of this may or may not cause an implicit transition.

In Firefox, these implicit transitions become particularly interesting when inheritance and subordinate properties perform transitions, but their transition-duration or transition-delay do not follow the transition. Webkit and Opera will be visually sensitive to the transition, but Firefox will be slightly confused. Implicit transitions are not easily performed in IE.

Also, don't forget to inherit that the DOM element's font-size will be inherited by its child elements, as long as it is not overwritten, it can cause an implicit transition.

7 conversions and pseudo-elements
Pseudo-elements (: Before and: After), introduced in CSS2. If you are unfamiliar, you can view the learning to use The:before and:after pseudo-elements in CSS. Although additional pseudo-elements (:: alternate,::outside) are defined in CSS3, they are not supported (so far). Therefore all CSS animation properties should also be animated properties of pseudo-elements.

Firefox and IE 10 can implement attribute transitions on pseudo-elements. Opera,chrome and Safari are not. WebKit has also been supporting since January 2013.

The transition of a pseudo-element causes some new problems in the content itself because the transitionend transition is not finished at all when the content is generated. In a certain time period, they should be triggered on the main element, and through the transitionend.pseudoelement to provide pseudo-elements, but even "CSS animation transition" in the "Transition events" section, the writer's scheme does not specify which one is the most appropriate.

We want to change the content property value, so IE 8 will re-render the element in special cases (for example, the hover state). The results show that compatibility with older versions of IE can affect the efficiency of all other browsers. Therefore, when attempting to make a property transition on a pseudo-element, make sure that the content value is not changed.

If the main element is not running: hover state, then IE 10 will not perform a transition for pseudo-element ": hover".

12	.some-selector:before{content:"hello";color:red;transition:all1s linear 0s;}.some-selector:hover:before{color:green;}

Under IE10,: Before in mouseover,: hover must be defined.

The question is not necessarily that you define the main element: the hover state. Instead, if there is no definition, IE 10 will: hover interpreted as: active. Even more strangely, the active state will persist even after MouseUp, and when you click again it will be canceled.

8 Background Tags
When you edit a tag, IE 10 is the only browser that can respond to a background or foreground, and if the label becomes a background, it does not perform a new transition, although it completes the transition that is being performed. IE 10 will wait until the label becomes the foreground before performing a new transition. Fortunately, IE 10 already supports the visibility API of the page, allowing developers to deal with this behavior.

9 Hidden elements
For hidden elements, transitions are not performed because most browsers explicitly assume that there is no need to run transitions in an invisible element. However, there are exceptions, and in Opera it will perform transitions regardless of whether the element is hidden or not.

10 The DOM tree is loaded before the transition
Domcontentloaded is triggered when the document is out of parse mode, and if you are using jquery, you should know Jquery.ready () and the transition can run before that.

11 Rendering differences
I have said this question before, and this article is based on my test results. The tests are run automatically, but it turns out that a lot of problems have been found.
It was not possible to achieve a background transition from gradient to gradient, but the transition from gradient to solid color could be achieved. If the gradient is in progress, the transition from white to the target color is about to begin, and when the transition starts, you will see the white flashing fast. This can be detected in all browsers today.

However, Firefox seems to be using different algorithms to render images to show that they perform an animated transition (see example). Obviously, when the animation transitions, Gecko does not show good results. If Transform:scale () is low enough, this situation will occur.

Firefox does not transition animations from a:visited to A:hover, and vice versa. But it jumps directly from a:visited to a:link and then transitions to a:hover state, as you can see in this example, in the Mozilla Developer Network "Privacy and the:visited Selector" Referred to. However, as with Chrome,safari and Opera browsers, IE 10 transitions from a:link to a:visited.
If the position of the child element changes, Firefox does not trigger the attributes of the element, and Webkit,opera and IE 10 are triggered.

12 Recommendations for the specification
After reading the entire specification and testing all the features, it would be better to have the following optimizations:

• Join Transitionsend (note is plural), and once all transitions of an element are completed, the trigger is started. It tells a series of properties that have been triggered, but does not need to know what has been transitioned, as long as you know when all the animation transitions can be completed.
• Join the Transitionstart task so that you can get each property you want to transition. Because JavaScript's event loops and render paths do not necessarily contain each other, a single transitionsstart (which repeats multiple times) can be a better solution. I don't know why the cancel task is, so it's called "no more control after operation."
• To identify which transitionend need to be triggered, the previous example of WebKit padding and padding-left problems can be a headache.
• To clarify how the "invisible transition" is handled, the Transition-property:font-size line-height:1em in the previous example should have a clear approach.
• You need to add those that allow you to define pointer-events:none and prevent accidental hover: The transitioning pseudo-class, which prevents abusive styles because they themselves trigger new transitions or change the transitions that are in progress. In addition to these recommendations, we also need to be able to do some general work without the use of JavaScript for assistance.
• Sometimes you need to disable transitions. For example, to make the perfect transition before a site visitor, you need to adjust the layout and make a precise measurement of the dimensions to perfectly layout the location.
• Sometimes you want to immediately remove an object from the DOM. You can add a class and wait for the transitionend to complete before deleting it.
• As with deleting an object, you want to add a new element. You can insert this element and set "Hide" to make changes to the style of the new element.
• reordering, hiding and displaying elements are more common. Styling for these will be like the operations utility, such as isotope.

13 Using delay
Using the delay, can be a good solution to the unintentional mouse hover caused by the style changes, like settimeout ().

14 Summary (refer to the example mentioned above)

• Be aware when using Transition-property:all, or you will encounter transitionend situations where you do not need to convert.
• When you use an abbreviated attribute, the number of triggered events varies depending on the browser.
• Opera and IE do not support a negative delay time.
• WebKit there are problems with attribute precedence, for example: To avoid transition-property:margin, margin-left situation.
• IE does not support implicit conversions.
• Firefox and Opera cannot parse Transition-property:all, width.
• Opera confuses the precedence of attributes.
• The transition of a pseudo-element does not affect transitionend.
• The transition to pseudo-elements will appear under IE 10: hover bug.

"Turn" CSS3 experience in practical use of transition specifications