1. Browser rendering principle

Steps:

  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. Layout (document flow, box model, calculated size and location)
  5. Paint (to draw border colors, text colors, shadows, etc.)
  6. Compose (display screen according to cascade relationship)

The general way to update styles with JS

  • For example, div. Style. background = ‘red’
  • For example, div. Style. display = ‘none’
  • Such as div. ClassList. The add () ‘red’
  • For example, div.remove(delete the node directly

Similarities and differences of the above methods:

So let’s look at three ways of parsing

  • The first is the whole process

    • Div.remove () will trigger the current disappearance of other elements relayout

  • The second type skips the layout

    • I’m going to change the background color and I’m going to do repaint + Composite

  • Third, skip Layout and Paint

    • Change transform, just composite
    • Note that the effect must be viewed in full screen, there are problems in iframe

2. Transition and Animation for CSS

Transform Complete introduction

Four common functions

  • The displacement of the translate

    • translateX()

    • translateY()

    • translate( ,? ) ? The representative can be omitted

    • TranslateZ () and parent container Perspective (pilot or depth of field)

    • translate3d(x, y, z)

      • Absolutely the perfect answer in the middle

                        top:50%;
                        left:50%;
                        transform:translate(-50%, -50%); // The parent element must be positionedCopy the code

  • Scale is used less often because it gets fuzzy

    • scaleX( )
    • scaleY( )
    • scale( , ? )

  • Rotate the rotate

    • rotate( [ |])
    • rotateZ([ | ])
    • rotateX([ | ])
    • rotateY([ | ])
    • Rotate3D is too complicated, please check the details

  • Tilt skew

    • skewX([|])
    • skewY([ ])
    • skew( [ ],[|]?)

  • Use a combination of

    • Translate the transform: scale (0.5) (100%, 100%);
    • transform: none; Cancel all
Experience:
  • You usually need to coordinate the transition
  • Inline elements do not support a transform and need to become a block first

Transition animation

Function:

  • Supplementary intermediate frame

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
  • You can use all to represent all attributes
  • transition: all 200ms
  • Transition means has: linear ease | ease – in | ease – out | ease – in-out | cubic bezier – | step – start | | step – end steps, Specific meaning should rely on mathematical knowledge developer.mozilla.org/zh-CN/docs/…

Note: Not all attributes can be transitioned

  • Display: None => Block cannot transition
  • Visibility: hidden => visible
  • Search for the difference between display and visibility
  • Background colors can also be excessive

Animation animation


@keyframesAnimation name {0%{// When the start and end states are missing, the elements default start and end states are used}... You can define an infinite keyframe in between or you can write it asfrom   toIn the form of100%{}} keyframe does not write property is the default value animation must be combined with the corresponding element to trigger the effectanimation-name: Animation name;animation-duration: Animation duration;animation-timing-function: Animation speed curve; There are several1.ease
 2.ease-in
 3.ease-in-out
 4.ease-out
 5.steps() number of steps, you can do dynamic graph6Bezier curve7.linearuniformanimation-delay: Animation delay is zero by default1.n(specified time)s animation-iteration-count: indicates the number of times an animation is played1. Infinite Indicates the number of times to be played2.n(Specified number of times) animation-direction: specifies whether the animation is played in reverse direction in the next period. Default value normal: indicates that the animation is played in reverse direction every time. Altermate: indicates that the animation is played in reverse direction even times1.reverse: Reverse every time2. Alternate-reverse: odd number of reverse broadcasts, even number of forward broadcasts animation-fill-mode: start position1. The default valuebackwards(Back to original state)2. Forward: reserve the last frame of animation-play-state: run/pause of animations1The default running.2.paused: animation name animation time animation speed curve animation delay times direction pause start start position // Write on the corresponding element </pre>Copy the code