Methods to resolve the conflict between transition animation and display

As shown in demo (if not displayed, check the source address http://jsfiddle.net/ihardcoder/HNduT/2/), the basic effect is that after clicking the "translate" button, the transparency of the blue area changes to 0, and then hide display: none; after clicking the reset button, the display: block in the blue area is displayed, and the transparency is gradually restored to 1. The Code is as follows:

 1 var btn1 = $("#testbtn1"); 2 var btn2 = $("#testbtn2"); 3 var container = $("#container"); 4  5 btn1.on(‘click‘, function(e) { 6     container.css({ 7         "transition": "opacity 1s", 8         "-webkit-transition": "opacity 1s", 9         "-moz-transition": "opacity 1s",10         "-o-transition": "opacity 1s",11         "-ms-transition": "opacity 1s",12         "opacity": "0.1"13          });14     setTimeout(function() {15         container.css("display", "none");16     }, 1000);17 });18 btn2.on(‘click‘, function(e) {19     container.css("display","block");20     container.css("display");21     container.css("opacity","1");22 });

The first line in the above Code looks strange, and some people may doubt the role of this Code. The fact is that if this code is not found, the result after clicking reset is: the blue area is instantly displayed, and there is no transitional Effect of transparency change.

As for the cause of this phenomenon, I have not yet understood the deep-seated mechanism. For the moment, it is understood that the transition TRANSITION OF css3 does not support display changes, and direct operations on display will destroy the transition animation, therefore, in row 14th, the opacity transition animation is separated from the display operation through setTimeout.

The purpose of the 20th lines of code is as follows: when the browser UI thread processes UI operations, add the set operation of multiple CSS attributes to the same tick for processing (for about the browser processing tick mechanism, refer to the http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering? Utm_source = infoq & utm_medium = popular_links_homepage). That is to say, if no 20th lines of code are inserted, the set operation on the CSS attribute of rows 19th and 21st will be executed simultaneously, therefore, the results will be instantly displayed. The 20th line of code is actually a get operation on the CSS attribute. In my understanding, if the get operation is inserted between the set operations of the two CSS attributes, the UI thread will be executed in sequence during processing, and the display and opacity operations will be executed in different tick operations, so that we can achieve the desired transition effect.

Due to the damage of display to transition, there is another method to hack. There is no error, that is, setTimeout! (This product is completely a JS killer !) The Code is as follows:

1  btn2.on(‘click‘, function(e) {2     container.css("display","block");3     setTimeout(function(){4        container.css("opacity","1");5     },delay);6  });

However, the setTimeout method has a drawback. The delay of Line 1 needs to set different values in different browsers (or even the same browsers of different versions). I have tested it myself, delay = 0 under chrome35 and ie10, and delay> = 14 Under firefox30.

The third solution is implemented through window. requestanimationfram. The Code is as follows:

1 btn2.on(‘click‘, function(e) {2       container.css("display","block");3       requestanimationframe(function(){4          container.css("opacity","1");5       });6    });

Requestanimationfram is used to delay opacity operations to the next tick to separate display operations. The basic principle is the same as setTimeout.

In addition, I still haven't found any relevant information about why display damaged the transition animation to prove its internal mechanism. My personal understanding is that the display operation will trigger the Reflow operation of the browser, the effect supported by transition is only to trigger the repaint operation of the browser and return to the demo above. If we control the display and hiding through the visibility attribute, the effect of transition will not be damaged. So for the moment, we can think that the combination of reflow and repaint will damage the animation effect of transition. For the deeper reasons, let me borrow a pair of eye breaks ~