The reason for writing this article

  • In the previous article, I mentioned how to animate display transitions, but I didn’t go into detail about how this works.
  • In order to better let people want to learn in-depth understanding so overtime wrote this “short”, I think later or short, otherwise we look too tired

The official start of the

  • Initialization interface
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> <title>Document</title> <style> #app {width: 200px; height: 200px; background-color: red; display: none; transition: all 1s; } < / style > < / head > < body > < div id = "app" > < / div > < button id = "test" > test < / button > < / body > < / HTML >Copy the code

  • At this point I initialize the app’s display to None and write to the script file
<style> #app { width: 200px; height: 200px; background-color: red; display: none; } </style>... <script> test.onclick = function () { const app = document.querySelector('#app') console.log(app, 'app') app.style.transform = "translateX(200px)" app.style.display = "block" } </script>Copy the code
  • The initialization screen looks like this:

  • At this point, I click the test button

  • There is no animation, it is very stiff, there are some scenes THAT I need performance, such as initialization without rendering, but when it is animated, it is possible to use this line of code

 test.onclick = function () {
        const app = document.querySelector('#app')
        console.log(app, 'app')
        app.style.display = "block"
        const height = app.offsetHeight
        app.style.transform = "translateX(200px)"
    }
Copy the code
  • When I add const height = app.offsetheight and click on the test button, the display toggle comes up with “animation” and it’s overdone
  • Why is there animation? Because when I read these special properties of the DOM, the browser forces me to empty the render queue once, so I can get the latest values. So when I read it, it’s already a block display, so. We have a transition animation

The effect is as follows:

appear"Transition Animation"What’s going on?

  • Actually,displayYou can’t animate it, so the title+ the quotes
  • How can there be a transition?
    • There are numerical variations, such as transparency, from0-1.
    • Initialization has a render display
    • intransitionProperties contained in it
    • . I’ll let you add to that

Why is it that when you add a line of code, you get an animation?

  • One of the most common problems people encounter when writing modern front-end frameworks is the uncertainty of rendering time.
    • For example,vueThe inside of thenextTickImplementation, there’s a gracefully degraded implementation. It’s inmountedTo get it from the life cycle functiondomNodes are often unavailable or not fully rendereddomNode. I haven’t used it for a long timevueWhy?
    • As with today’s data-driven frameworks, whenever the data changes, the corresponding logic binds the datadomNodes should be updated, but the timing of the update is uncertain, because there are intermediate layers, such as existencediffThere may be queues, because when you change data frequently, the framework itself has to be optimized to merge data updates over a period of time and then actually update itdom, and so on these things are done, to updatedomNode, and then we can see the node corresponding to the latest data
    • When we do go to updatedomNode, there is also a queue. This is theThe browser's render queue
  • If you can’t understand what I said above, you can read my handwriting earlierReactIn this series of articlessetStateAsynchronous queue implementation

The browser’s render queue

  • When is the queue most useful?
    • Frequent direct operationdomWhen, for exampleforFrequent operations inside the loopdomAt this point, the browser will optimize our operations and merge some operations into one
    • Render queue heeldisplayThe associated
<script>
    test.onclick = function () {
        const app = document.querySelector('#app')
        console.log(app, 'app')
        app.style.display = "block"
        const height = app.offsetHeight
        app.style.transform = "translateX(200px)"
    }
</script>
Copy the code
  • When we executeapp.style.display = "block"And when I do that,domThe node is not updated at this point,jsThe parsing engine is smart enough to see that you have code to change right after youdomNodes are first queued for centralized one-time operations
  • When we executeapp.offsetHeightThis line of code, we find that we need to readdomThe browser is afraid that operations that are not currently performed in the queue will cause you to read an incorrect valueBUGThe render queue will then be emptied and executed, allowing you to get the maximumAccurate/newvalue
  • Ask the browser for something when you request itstyleWhen the message is sent to the browserflushQueues, such as:
    • offsetTop, offsetLeft, offsetWidth, offsetHeight
    • scrollTop/Left/Width/Height
    • clientTop/Left/Width/Height
    • width,height
  • When you request some of the above attributes, the browser needs to give you the most accurate valuesflushThe queue,
  • Because there may be operations in the queue that affect these values. Even if you get information about the layout and style of an element regardless of the most recent or changed layout,
  • The browser forces the render queue to refresh.

After clearing the render queue

  • When readingoffsetHeightProperty after we empty the render queue, then at this timedomAfter re-rendering is complete at this pointdisplayIs alreadyblock. And it’s displayed on the interface, so let’s do it againdomThe transition animation will appear on the property.

The last

  • Paper come zhongjue shallow, more practice, more thinking is the only way to a higher level, want to see my previous handwritten source article, my gitHub source address is:https://github.com/JinJieTan/Peter-Remember,Staroh

  • Welcome to follow my public account:[Front-end peak]If you think it’ll help, you can order itpraise/Looking at theLet more people see my article