Analysis of the reasons why animation does not take effect in React

This article introduces to you the analysis of the reasons why animation does not take effect in React. It has certain reference value. Friends in need can refer to it.

You need to make such a component in your project
According to different values, the width of this blue bar is different.
This is actually very simple. I just need to dynamically calculate its width based on the data and generate nodes.
Part of the react code is as follows

{data && data.length > 0
          ? data.map((item, index) => (
              <p>
                </p><p>
                  <span>{item.name || item.label}</span>
                  <span>{item.value}</span>
                </p>
                <p>
                  <span></span>
                </p>
              
            ))
          : null}

In this way, the function display shown in the picture above can be realized, but now there is a demand, that is, the blue bar needs to move when it is first loaded.

transition

I first thought of the transition attribute of css, and then added it to the code

.inner {
        width: 0;
        transition: width 0.6s ease;
      }

But the animation did not take effect.

Then I went back and thought about why it didn’t work?
The transition attribute will only take effect when the width attribute changes. Now it can only show that the width of span has not changed.
Now let’s talk about my code. It calculates the width while rendering the node. That is to say, when the node is generated, the width has already been set. So of course the transition will not take effect

Now how can I improve this code to make the animation take effect?

I can only let the node be generated first, and then change its width.
This reminds me of the ref attribute in react. This attribute accepts a string or a function, and this function will be triggered after the node is loaded or before the node is destroyed. Then I can pass this The parameters returned by the function are used to change the width of this node, which is exactly what I need.
With the idea, start improving the code.

{data && data.length > 0
          ? data.map((item, index) => (
              <p>
                </p><p>
                  <span>{item.name || item.label}</span>
                  <span>{item.value}</span>
                </p>
                <p>
                  <span> {
                      if (n && n.style) {
                        n.style.width = `${getWidth(item.value)}px`;
                      }
                    }}
                  />
                </span></p>
              
            ))
          : null}

Then open the browser to see the result, and it is indeed successful.
The effect is as follows.

Related recommendations:

How to implement the method of uploading and compressing images in js

Usage of react: How React renders UI

The above is the detailed content of Analysis of the reasons why animation does not take effect in React. For more information, please follow other related articles on the PHP Chinese website!