如何基于动态变化的变量实现进度条宽度的过渡动画效果

你写的两种行内设置宽度加过渡的写法本身语法没有错误，动画不生效大概率是逻辑层面的问题，可按以下步骤排查和修复：

排查常见问题 #

• 确认progress变量为合法数字，初始值建议设置为0，不要留空、设为undefined或字符串类型，否则宽度属性解析失败无法触发过渡
• 不要给进度条组件/节点设置动态变化的key属性，否则React每次更新都会销毁旧节点创建新节点，新节点直接应用新宽度，没有前后状态对比就不会触发过渡动画
• 如果需要组件首次渲染就出现从0到初始值的动画，需要在组件挂载完成后再赋值初始进度，触发重绘：

import { useState, useEffect } from 'react';

const Progress = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    // 组件挂载后再计算并设置实际初始进度
    const initProgress = 计算非空输入框占比的逻辑;
    setProgress(initProgress);
  }, [])

  // 后续输入框内容变化时更新progress即可触发过渡
}

更优雅的动态样式方案：CSS变量 #

如果不想把过渡写在行内，也可以用CSS自定义属性传递动态值，写法更清晰易维护：

JSX代码

<div className="progress-div" >
    <div style={{'--progress': `${progress}%`}} className="progress"/>
</div>

CSS代码

.progress-div {
    background-color:#E2E2F6;
    border-radius: .5rem;
}

.progress {
    background-color: #8B8CC7;
    height: 15px;
    width: var(--progress);
    /* 只给width属性加过渡，比all性能更好 */
    transition: width 500ms ease;
}

内容的提问来源于stack exchange，提问作者Jose Bernardo