How browsers render

  • Build HTML from HTML (DOM)
  • Building a CSS Tree from CSS (CSSOM)
  • Combine two trees into one render tree
  • Layout (document flow, box model, calculated size and location)
  • Paint (to draw border colors, text colors, shadows, etc.)

*Composite (display the picture according to the cascading relationship)

How to update styles

JS is generally used to update styles

  • Such as div. Style. Background = ‘red’
  • div.style.display=’none’
  • div.classList.add(‘xxx’)
  • div.remove()

What’s the difference?

The first way is to go all the way

Div.remove () triggers the current element to disappear, and the rest of the layout,paint, and Composite elements will follow the flow of the document

Second, skip layout

Change the background color and repaint and Composite directly without changing the layout

Third, skip layout and paint and go straight to Composite

Change transform, just composite

browsecsstriggers.com/ See how all attributes are rendered

Use of Transform and animation

transform

Four common functions

  • The displacement of the translate
  • The zoom scale
  • Rotate the rotate
  • Tilt skew
  • Inline elements do not support a transform, but instead become a block

Translate the mobile

  • TranslateX (length or percentage)
  • TranslateY (length or percentage)
  • Translate (length or percentage, length or percentage [omitted here]), the percentage is the length relative to itself
  • Position: Absolute; left:50%; top:50%; Translate (-50%,-50%) center the absolute elements

Scale zooming

  • ScaleX (digital)
  • ScaleY (digital)
  • Scale (number, number [] can be omitted)
  • Use less, easy to appear blurred

Rotate Rotates clockwise

  • Rotate (90deg) is the same as writing rotateZ
  • rotateX(90deg)
  • rotateY(90deg)
  • Generally used for 360-degree loading

Skew tilt

  • skew(10deg,10deg)
  • skewX(10deg)
  • skewY(10deg)
  • Multiple combinations can be combined, such as zooming in and rotating moves

Transition adds intermediate frames

  • The syntax is: Transition: indicates the delay of the attribute name Durationtransition:left 200ms linear 100ms;
  • You can separate two different attributes with commastransition:left 200ms,right 200mms;
  • You can use all to represent all attributestransition:all 1s;
  • Transition modes include:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|stepsSpecific effect directly replace the code view,Not all attributes can transition
  • display:none=>blockCan’t transfer
  • Visibility :hidden=>visible
  • The difference between display and visible: Display changes the document flow, visible changes the view effect, it’s still in the document flow
  • Background and opacity can be transitioned
  • A transition must have a beginning

A ===>. B ===>. C (including. B), how to know when to reach the intermediate point, use setTImeOut or listen for transitioning events

Animation Adds keyframes to add animations

@keyframs Full syntax

@keyframs XXX {from{transform:scale(1.0)} to{transform:scale(1.2)}} Transform :scale(1.0)} 100%{transform:scale(1.2)}}Copy the code

animation

Shorthand syntax animation: | | transition way long delay | | | times direction whether filling | | suspended animation

  • The duration is 1s or 100ms
  • Transition mode: The value is the same as transition, for examplelinear
  • Times: 3 orinfinite
  • Direction:reverse|alternate|alternate-reverse
  • Fill mode:none|forwards|backwards|both
  • Whether to suspend: pasued | running properties as animationPlayState alone
  • All of the above attributes have separate attributes

Through two cases to experience the effect, can achieve the heart beating effect, code copy and paste to the editor can run

/The practice of the transform/

.center{ height: 200px; width: 200px; transform:rotate(-45deg); background-color: red; } .leftRoll{ position:absolute; height: 200px; width: 200px; bottom:100%; left: -100%; transform:rotate(45deg) translateX(150px); background-color: red; border-radius: 50% 0 0 50% ; } .rightRoll{ height: 200px; width: 200px; position:absolute; bottom:100%; right: -100%; transform:rotate(45deg) translateY(150px); background-color: red; border-radius:50% 50% 0 0 ; } <! HTML --> <div class="heartWrap"> <div class="leftRoll"></div> <div class="rightRoll"></div> <div class="center"></div> </div>Copy the code

/The practice of animation/

The transform: scale (1.2)}. Animation {position: relative; display: inline-block; margin: 300px; transition:all 1s ease-in-out; animation:keepaliveHeart .5s linear infinite alternate ; } @keyframes keepaliveHeart {0%{transform:scale(1.0)} 100%{transform:scale(1.2)}} <! <div class="leftRoll"></div> <div class="rightRoll"></div> <div class="center"></div> </div>Copy the code

Thank you guys for reading, a lot of praise, let me this little wild flower will grow faster, thank you ~