First, browser rendering principle

Browser rendering process:

  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine two trees into one render tree
  4. Document flow, box model, calculation size and location
  5. Paint: to draw border colors, text colors, shadows, etc
  6. Compose (display screen according to cascade relationship)

Reflow:

When the browser finds that something has changed that affects the layout and needs to go back and re-render, the backoff process is called reflow.

Reflow computs the geometry and position of all nodes recursively from the root frame < HTML >.

Repaint:

When changing the background color, text color, border color, and so on of an element does not affect the attributes of its surrounding or internal layout, a portion of the screen is redrawn, but the element’s geometry remains the same.

Note:

  1. Nodes that display: None will not be added to the Render Tree, and visibility: hidden will, so if a node is not initially displayed, setting display: None is preferable.
  2. Display: None will trigger reflow, while visibility: Hidden will only trigger repaint because no position changes have been detected.
  3. In some cases, such as changing the style of an element, the browser does not reflow or repaint once immediately. Instead, the browser will accumulate a batch of such operations and do a reflow. This is also called asynchronous or incremental asynchronous reflow. However, in some cases, such as the resize window, the default font of the page is changed. For these operations, the browser reflow immediately.)

Introduction to TarnsForm

Four common functions

  • The displacement of the translate
  • The zoom scale
  • Rotate the rotate
  • Tilt skew

You usually need to coordinate the transition

Inline elements do not support a transform and need to become a block first

B: Yes

Transition adds a transition effect to a property change

Effect: Replenishes intermediate frames

Grammar:

  • Transition: Indicates the delay of the attribute name duration
    • transition: left 200ms linear
  • You can separate two different attributes with commas
    • transition: left 200ms, top 400ms
  • Transition: All 200ms
  • Transition modes include:
    • Linear | ease | ease – in | ease – out | ease – in-out | cubic bezier – | step – start | step – end steps.
  • Transition allows you to add transition effects to multiple attributes at the same time, such as changing the transparency of an element while moving it. However, no matter how many properties are changing at the same time, the transition effect can only be one-time, i.e. a single action.

Fourth, the animation

Transition can only do one action. If your animation has multiple actions, you need an animation

Two consecutive line segments have three key points, and two consecutive actions must also have three keyframes.

@ keyframe grammar:

@keyframe <identifier> {
    from {
        <cssKey>: <xxx>
    }
    to {
        <cssKey>: <xxx>
    }
}
Copy the code

Animation grammar

Animation: | | transition way long delay | | | times direction whether filling | | suspended animation;

  • Duration: 1s or 1000ms
  • Transition mode: takes the same value as transition, such as Linear
  • Times: 3 or 2.4 or infinite
  • Direction: reverse | alternate alternate – reverse
  • Filling pattern: none | recently | backwards | to both
  • Whether to suspend: paused | running
  • Animation name @keyFrame<identifier>

Each of the above attributes has a corresponding individual attribute