Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use Transition animation in CSS3", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use Transition animation in CSS3" this article.

CSS3 Transition animation

Transition animation is very easy to use. You only need to add transition-delay, transition-duration, transition-property and transition-timing-function attributes to the element to have a filtering effect. An easier use is to use the abbreviated transition attribute directly:

Transition: / / transition-delay defaults to 0 transition-property / all// transition-timing-function defaults to easetransition: 0.3s

As transition animation is almost cost-free, has not been too in-depth study, recently read the source code and MDN documents found that some knowledge is not in place, so there is this article, I hope it will help readers to have a more in-depth understanding of Transition animation. (learn video sharing: css video tutorial)

In order to minimize the cost of reading comprehension, this article will be a little more verbose, and most of the examples will be illustrated. ]

What is Transition?

To put it simply, it is the transition animation. Usually, the style of the DOM node is updated immediately on the page, such as changing the width and height, changing the transparency, changing the background color and so on.

For example, when the mouse moves over a button, in order to highlight the interaction of the button, the style of the button will be modified during hover so that the user will notice it. Without transition transition animation, the user will feel stiff and stiff.

.button {/ /... Background-color: # 00a8ff;}. Button:hover {background-color: # fbc531; transform: scale (1.2);}

Add a single line of transition, and the change will be smoother.

.button {/ /... Transition: 1s;} / /.

In this example, we modified background-color and transform, combined with the transition property, the browser will automatically let the attribute value change over time, gradually transition from the old value to the new value, which is visually animated.

Distinguishing from Animation,Transition animation focuses on showing a transition effect, from beginning to end. While Animation does not need to change, it can play ▶️ in a loop.

It is important to note that not all attribute changes have a transitional effect.

Some CSS properties only support enumerated values, black and white, and there is no intermediate state, such as visibility: visible; is modified to visibility: hidden; will not have animation, because there is no visible and invisible intermediate state. The representation on the browser is that the element suddenly changes to hidden as soon as the duration arrives.

.button: hover {/ /... Visibility: hidden;}

Although some attributes are computable values, they are not destined to have a transition effect. For example, transition-delay,transition-duration takes effect immediately. It is worth adding here that since the transition-* attribute takes effect immediately, if this line of code is added when it is hover, then the effect will be animated when hover is added, but there will be no animation when it is removed.

Even transitive attribute changes may lose the transition effect because the intermediate state cannot be calculated. For example, although the box-shadow attribute supports the animation of transition, it is also abrupt if you switch from "outset" to inset.

.button {/ /... Box-shadow: 000 1px rgb (000 / 15%); transition: 1s;}. Button:hover {/ /. Box-shadow: inset 2000 10px rgb (000 / 15%);}

From the performance point of view, the change in box-shadow is that hover will take effect immediately.

If a property value is a continuously computable value, but becomes a hash before and after the change, the transition will not take effect. For example, there is no animation from height: 100px = > height: auto.

After reviewing the basic usage of Transition, let's take a look at a problem that you will encounter in an actual development scenario.

Why didn't Transition animation work?

Scenario question: suppose we now receive the animation requirement of a custom drop-down selector. The designer gives the following effect image:

This is a very common appear-disappear animation, will appear in many component libraries, click the trigger (button) to render Popup (drop-down content) on the page, and Popup appears at the same time need to have gradual and sliding animation; expand and click the button again, Popup needs to fade and slide up.

We don't pay much attention to its implementation when we use it at ordinary times, so let's try it now.

Ignore the content of popup for the time being, use a div to occupy place to simulate, the structure of HTML is very simple.

When you click the button, let popup show / hide, and then toggle the .active class name of popup.

Const btn = document.querySelector ("# button"); const popup = document.querySelector ("# popup"); if (! popup.classList.contains ("active")) {popup.style.display = "block"; popup.classList.add ("active");} else {popup.style.display = "none"; popup.classList.remove ("active");}

Write a CSS style with transparency set to 0 when not active, offset up, no offset and transparency set to 1 when active.

# popup {display: none; opacity: 0; transform: translateY (- 8px); transition: 1s; & .active {opacity: 1; transform: translateY;}}

The complete code is here, there seems to be no problem with the code, when you click the button to switch, popup should have an animated transition effect. However, the actual operation effect:

There is no transition effect at all. Why is that? Obviously, transition has been set up, and opacity and translateY are both computable and transitive values, which have also changed, so why don't browsers recognize them?

Before looking at the documentation, let's try to use the essential oil setTimeout.

Option 1: setTimeout essential oil

Modify the JS code:

Btn.addEventListener ("click", () = > {if (! popup.classList.contains ("active")) {popup.style.display = "block"; setTimeout (() = > {popup.classList.add ("active");}, 0);} else {popup.classList.remove ("active"); setTimeout (() = > {popup.style.display = "none";}, 600);}})

You can see that with the addition of setTimeout, the transition animation takes effect.

The setTimeout 600ms when hidden corresponds to the transition: 0.6s set in the CSS, that is, the display is set to none after the animation is completed.

The main confusion is why you also need to add setTimeout when displaying it. What is the role of setTimeout 0 here? Go to the specification document with questions.

Find the following paragraph in the Starting of transitions section of the specification document:

When a style change event occurs, implementations must start transitions based on the computed values that changed in that event. If an element is not in the document during that style change event or was not in the document during the previous style change event, then transitions are not started for that element in that style change event.

When a style change event occurs, the implementation (browser) must perform transition animation based on the properties of the change. However, if an element is not in the document when a style change event occurs or during the last style change event, no transition animation is started for that element.

Combined with the browser's process of building RenderTree, we can clearly locate the problem: when a style change occurs, the DOM element of display: none does not appear in the RenderTree (style.display='block' is not synchronized and will not be updated to RenderTree the next time it is rendered), which does not meet the conditions of Starting of transitions.

So the function of setTimeout 0 is to evoke a MacroTask, and by the time EventLoop executes the callback function, the browser has finished rendering once, plus the .active class name, so there are sufficient conditions for performing the transition animation.

Optimization scheme 2: accurate clamping position requestAnimationFrame

Since the goal is to make the element appear in RenderTree first, which is related to rendering, it's easy to think of replacing setTimeout with requestAnimationFrame, which is more accurate because the timing of requestAnimation execution is related to rendering.

If (! popup.classList.contains ("active")) {popup.style.display = "block"; requestAnimationFrame (() = > {popup.classList.add ("active");});}

Add a small episode: in the process of finding data, we learned that the specification of requestAnimationFrame requires its callback function to be executed before the Style/Layout and other stages. at first, Chrome and Firefox are implemented in accordance with the specification. While Safari and Edge are in the implementation of the time is after. From the current performance, Chrome and Firefox have also been changed to execute later. Looking through the previous documents will say that you need to nest two layers of requestAnimationFrame, but now you no longer need it. Is requestAnimationFrame called at the right point?

Optimization plan 3: Force Reflow

In the specification document, also note the following sentence:

Implementations typically have a style change event to correspond with their desired screen refresh rate, and when up-to-date computed style or layout information is needed for a script API that depends on it.

It means that browsers also usually generate style change events in two cases, one is to meet the screen refresh frequency (not requestAnimationFrame? Second, when the JS script needs to get the latest style layout information

In JS code, when some API is called, the browser calculates the style and layout synchronously, frequently calling these API (offset*/client*/getBoundingClientRect/scroll*/... Etc.) often become a performance bottleneck.

However, there can be wonderful chemical reactions in this scene:

If (! popup.classList.contains ("active") {popup.style.display = "block"; popup.scrollWidth; popup.classList.add ("active");}

Notice that we just read scrollWidth between display and add class, without even assigning a value, and the transition animation came back to life.

The reason is that scrollWidth forces synchronization to trigger rearrangement redrawing, and by the next line of code, the display property of popup has been updated to Render Tree.

Optimization plan 4: let me know onTransitionEnd after the transition

Now the animation has been made clear. In the source code of the open source library, it is found that libraries such as vue, bootstrap, react-transition-group and other libraries all use the force reflow method, while the css-animte library used by antd is by setting setTimeout.

[disappears] the animation is not elegant enough. We wrote the setTimeout 600s directly before, making the elements disappear at the end of the animation. In this way, the reusability of the code is poor, and you have to change the animation time in two places (JS + CSS). Is there a more elegant implementation?

Popup.classList.remove ("active"); setTimeout (() = > {popup.style.display = "none";}, 600)

Transition Events is also mentioned in the document, including transitionrun,transitionstart,transitionend,transitioncancel. You can see what the event stands for by the name, and here you can optimize the code with transitionend.

If (! popup.classList.contains ("active")) {popup.style.display = "block"; popup.scrollWidth; popup.classList.add ("active");} else {popup.classList.remove ("active"); popup.addEventListener ('transitionend', () = > {popup.style.display = "none";}, {once: true})}

It should be noted that transition events also has the characteristics of bubbling and capture, and pay attention to event.target if you have nested transition.

So far we have completed an animation implementation that appears and disappears with native JS, and the complete code is here. At the end of the article, we refer to vue-transition to develop a minimum implementation of the animation transition of a single element of React Transition.

Imitating v-transition to implement a React Transition component

Split into several processes according to the animation process:

Render the DOM node in enter phase to initialize the initial state of the animation (add *-enter class name)

Enter-active phase performs transition transition animation (add *-enter-active class name)

Enter the normal display phase after the enter-active transition (remove *-enter-active class name)

Enter-to and leave-to are not available for the time being, and the leave phase is basically the same as enter.

Look directly at the code:

Export const CSSTransition = (props: Props) = > {const {children, name, active} = props; const nodeRef = useRef (null); const [renderDOM, setRenderDOM] = useState (active); useEffect () = > {requestAnimationFrame (() = > {if (active) {setRenderDOM (true); nodeRef.current?.classList.add (`$ {name}-enter`); / / eslint-disable-next-line @ typescript-eslint/no-unused-expressions nodeRef.current?.scrollWidth NodeRef.current?.classList.remove (`${name}-enter`); nodeRef.current?.classList.add (` ${name}-enter- active`); nodeRef.current?.addEventListener ("transitionend", (event) = > {if (event.target = nodeRef.current) {nodeRef.current?.classList.remove (`${name}-enter- active`);}}) } else {nodeRef.current?.classList.add (`${name}-accoune`); / / eslint-disable-next-line @ typescript-eslint/no-unused-expressions nodeRef.current?.scrollWidth; nodeRef.current?.classList.remove (` ${name}-accoune`); nodeRef.current?.classList.add (`${name}-leave- active`) NodeRef.current?.addEventListener ("transitionend", (event) = > {if (event.target = nodeRef.current) {nodeRef.current?.classList.remove (`${name}-leave- active`); setRenderDOM (false);});}});}, [active, name]); if (! renderDOM) {return null } return cloneElement (Children.only (children), {ref: nodeRef});}

This component receives three props, namely

Children needs ReactElement for transition animation. Only one Element is allowed.

Css class name prefix for name transition animation

Active Boolean value, which is used to distinguish between entering and disappearing

Mode of use:

/ / A ReactElement that needs to do transition animation. The above is all the content of this article "how to use Transition Animation in CSS3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.