Practical Use experience of CSS3 transition specifications

Practical Use experience of CSS3 transition specifications
This article mainly describes the CSS3 transition specification and differences in the use of different browsers. For more information about specific solutions or how to avoid problems, see another insightful article, "All You Need to Know About CSS Transitions ". Alex MacCaw talked about specific effects, and I am going to talk about the technical background, mainly about unexpected issues during the use of CSS transition. Structure (HTML), representation (CSS), and separation of behavior (JavaScript) are not new things. However, CSS can cross this boundary and be applied in a short period of time, this is actually a completely different topic. A few weeks ago, I developed a JavaScript module. Under the condition that CSS transition can be used, the JavaScript end cannot obtain the method for transition. The actual problem is that there is no way to synchronize the two. After multiple tests, I can only give up. My test results are described in this article. First, let's talk about getcomputedstyle (), which is a method that uses JavaScript to return the attribute value of CSS rendering in a browser. This method can be used to view "DOM Level 2: getComputedStyle ()" and "CSS Level 2: Computed Values ". For attributes such as font-size, you can use a single parameter to convert them to pixel values. However, for attribute values that can be abbreviated, such as margin, Some browsers return null. Then there are different attribute values for the same attribute, such as the font-weight Values bold and 700. WebKit also has a small bug that extracts attribute values from pseudo objects. The differences described here between browsers are the use of Firefox18 (Gecko), Opera January 2013 (Presto), Internet trigger10 (Trident), Safari 6.0.2 (WebKit) in 12.12 ), chrome 23 (WebKit) and Gecko and WebKit build channels. Let's take a look at the differences between the specifications and the actual situation. For convenience, I omitted the prefixes of various browsers. In this article, I created a CSS3 Transitions Test Suite to find out the problem. 1. The transition CSS3 transitions Specification defines the following four CSS attributes: the transition-propertytransition-durationtransition-delaytransition-timing-function transition attribute transition-property is used to specify the transition effect when one of the element's attributes changes. The default value of the system is all, which means that the browser can render all the convertible attributes in an animation (the transition-duration exceeds 0 s ), this attribute supports a list of multiple values separated by commas (,) (the same as all other transition-* attributes ). According to the regulations, a browser should accept and save any attributes that it cannot recognize. Therefore, the following example shows the padding transition lasting 2 seconds: <font face = "inherit"> transition-property: foobar, padding; transition-duration: 1 s, 2 s; </font> the copy code is different from the standard in that the above situation is resolved to transition-property: all in WebKit. Firefox and Opera will be resolved to transition-property: all, padding. transition duration the transition-duration Attribute 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 indicate 2.3 seconds ). Although the specification clearly specifies that the transition value must be a positive number, 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 lower than 10 ms. WebKit has a small bug in getComputedStyle () execution. For example, the returned value 0.009999999776482582s replaces 0.01 s. The transition delay time transition-delay attribute specifies the waiting time before a transition is executed. The value is also used. Delay can be a negative value, but this will cause smooth transition of the animation. IE and Opera do not accept the value of transition-duration between-10 ms and 10 ms. The floating point of WebKit will also appear here. The transition-timing-function attribute specifies the time curve of the transition effect. Including cubic-besuppliers (x1, y1, x2, y2), step (, start | end), and pre-defined cubic-besuppliers curve keywords, linear, linear, transform-in, memory-out and memory-in-out. When LEA Verou's exclusive cubic-bezr curve editor is used, the formulas behind the cubic-bezr are no longer important. Although the cubic-bezr curve is smooth, the step () function jumps to the next value at a fixed interval. This will produce a frame-by-frame Animation effect, such as "Pure CSS3 Typing Animation With steps ()". The calculated value of linear is usually expressed as cubic-bezr (0, 0, 1, 1), except for WebKit. However, WebKit still returns cubic-bezr (0.25, 0.1, 0.25, 1) instead of degrees. The specification specifies that the X value must be between 0 and 1, and the y value can exceed this range, while WebKit allows X to exceed this range, while Android browser (Version 4.0) but obfuscated the range of x and y. 2. Transition completion I have mentioned the problem of CSS asynchronous transition. The specification mentions that the TransitionEnd event allows JavaScript to synchronize with completed transitions. However, the hateful thing is that this specification is not described in detail. In fact, it simply indicates that a single event will be terminated due to the property of the completed transition. The Standard specifies that the abbreviation attribute (such as padding) should implement transition for all attributes including padding-top, padding-right, and so on, it does not indicate which attribute should be named in the TransitionEnd event. However, even if transition is defined as short attributes (such as padding), Gecko, Trident, and Presto can also implement transition for subattributes in normal writing (such as padding-top, webKit will block the transition. If you specify transition-property: padding, WebKit will execute the transition for padding, but transition-property: all will execute a new transition for padding-left. When padding is performing a transition, the Safari browser of iPhone 6.0.1 can also perform the transition between font-size and line-height. <Font face = "inherit">. example {padding: 1px; transition-property: padding; transition-duration: 1 s ;}. example: hover {padding: 10px ;}</font> copy the code. The preceding CSS triggers different TransitionEnd: 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: 1 s ;}. example: hover {padding: 10px ;}</font> The above CSS will trigger different TransitionEnd: 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" conversion. However, transition-duration: 1 s; transition-delay:-1 s; perform the conversion under Gecko and WebKit and immediately jump to the target value. Trident and Presto will not trigger any events. The floating point problem that WebKit encounters on getComputedStyle () also exists in TransitionEnd. elapsedTime. Math. round (event. elapsedTime * 1000)/1000 can be used to fix the vulnerability. The execution of background-position in WebKit and IE will trigger the TransitionEnd of background-position-x and background-position-y, instead of the TransitionEnd of background-position. Therefore, even if you know that the transition is being executed, you cannot rely on the existing TransitionEnd. propertyName. Although you can write a lot of JavaScript to make up for it, even if you adopt the latest method, you will not be able to implement it without performing an appropriate performance check on each attribute. 3. The transition Property Specification lists some CSS attributes that the browser supports animation transition. Of course, it also includes the attributes of CSS2.1. There are also some new attributes that can be dynamically changed, such as Flexible Box Layout. The Value Type of this attribute is very important. Margin-top accepts and values, but only animations can be implemented based on the list of convertible CSS attributes. However, this does not allow browser developers to avoid value transition. However, the word-spacing attribute is excluded. This property includes values, but no browser can display them in animated form. If you change the value of getComputedStyle () from A to B within the specified time of transition, the TransitionEnd event is transitioned from A to B. If it is not executed, for example, "the CSS property value has changed", you may need to carefully check the DOM. The setTimeout () resolution is not good enough to achieve rapid transition (a duration of less than several hundred milliseconds). At this time, requestAnimationFrame () is your helper. We will remind you before re-painting and provide some intermediate values for your reference. All except opera can be supported.