来自 jQuery，如何在 React.js 中制作 DOM 动画？比如动画进度条？答案

【问题标题】：Coming from jQuery, how does one do DOM animations in React.js? Such as animate a progress Bar?来自 jQuery，如何在 React.js 中制作 DOM 动画？比如动画进度条？
【发布时间】：2016-05-03 18:16:12
【问题描述】：

我已经使用 React 几个月了，我使用了大量的 jQuery 进行 DOM 动画/操作。我可以很好地处理这些操作，但是在 React 中制作动画和做闪亮的 UI 东西似乎很棘手。或者至少，不像 jQuery 那样简单。我不想将 jQuery 用于动画。

我正在尝试实现的一些示例：

用户向下滚动到我的个人投资组合页面的技能部分，其中有一些引导进度条。一旦用户滚动到它们，我将如何为这些条设置动画以“填充”它们。我想像一些检测位置的东西？我也可以建立自己的进度条，以便有更多的控制权。
当用户调整我的作品集部分的大小时，我的作品集部分有一个 flexbox 设置，其中包含代表我的项目的图像，我希望图像能够缓慢地重新定位，就像一个过渡，而不是捕捉到他们的新位置。
或者像从左/右滑入这样简单的东西？

我认为 jQuery 宠坏了我！我只是觉得我在 React 中没有那么多的控制权。我看过过渡组，但似乎非常有限。

这是我的进度条问题代码...

import React from 'react';

export default (props) => {
const width = `${props.lvl}%`

// setup diff colors for bars
let backgroundColor = (function(lvl){
    if (lvl <=35) {
        return '#ffa64d'
    }
    else if (lvl >= 36 && lvl <= 49) {
        return '#ffff66'
    }
    else {
        return '#47d147'
    }
}(props.lvl))

return (
    <div>
        <h4 style={{display: 'inline'}}>{props.name}</h4>
        <div className="progress">
            <div className='progress-bar' role="progressbar" aria-valuenow="70"
            aria-valuemin="0" aria-valuemax="100" style={{width, backgroundColor}}>
            </div>
        </div>
    </div>
)
}

【问题讨论】：

你可以使用reactjs inline styles动态计算进度条宽度。为什么你的动画不能使用css过渡？
您可以使用新的百分比重新渲染组件...
Rison，我当然想使用 CSS，但是因为我必须检测滚动位置（即仅在进度条部分在屏幕上时为宽度设置动画），我无法弄清楚如何仅使用 CSS 来完成。我认为它需要一些 JS 对吗？有没有办法只使用 CSS？

标签： javascript jquery animation reactjs react-bootstrap

【解决方案1】：

我认为大多数人都是通过 CSS 过渡来完成动画的；这是迄今为止最简单的方法。但是，我编写了一个自定义模块，该模块提供了通过操作存储为组件状态的一部分的内联样式来为元素设置动画的功能。你可以找到它here。您必须自己判断麻烦是否值得该功能。

【讨论】：