Css 过渡不适用于 React 中的第一个运行

Question

我做了一个进度条组件：

import React, {useState, useEffect} from "react";

var ProgressBar = ({percentage, duration}) => {
    
let [style, setStyle] = useState({
    "position":"relative"
})
useEffect(()=>{
        setStyle({
            "top":"0px",
            "position":"relative",
            "height":"100%",
            "backgroundColor": "lightblue",
            "color": "lightgrey",
            "left": "0px",
            "transition": `width ${duration}s`,
            "width": percentage+"%"
        });
}, [])
var cntStyle = {
    "display": "block",
    "width": "150px",
    "left":"0px",
    "backgroundColor":"grey",
    "height":"15px",
    "position": "relative"
}

    return (
        <div className="progressbar-container" 
        style={cntStyle}>
            <div className="progress" style={style}></div>
        </div>
    );
}

export default ProgressBar;

并像

一样使用它

<ProgressBar 
    percentage="80" 
    duration="5"  />

我想知道为什么转换不起作用。直接显示80%进度条

Answer 1

这不起作用，因为没有要从中过渡的宽度的初始值。

"CSS 转换允许您在给定的持续时间内平滑地更改属性值。" 阅读更多 here

如果您将百分比从一个值 (0) 更改为另一个值 (80)，此转换应该有效。

解决此问题的方法是使用间隔更新组件道具或使用进度条宽度的值 0 初始化组件样式

Css 过渡不适用于 React 中的第一个运行

Css transition does not work for the first run in React

css

transition

Css 过渡不适用于 React 中的第一个 运行

Css transition does not work for the first run in React

css

transition

Css 过渡不适用于 React 中的第一个运行