如何在带有动画的 react-transition-group 中显示垂直进度条答案

【问题标题】：How to show Vertical Progress Bar in react-transition-group with animation如何在带有动画的 react-transition-group 中显示垂直进度条
【发布时间】：2019-05-03 08:28:52
【问题描述】：

Here 是一个用于进度条动画的 jQuery 示例。我想在没有 jQuery 的 Reactjs 中使用这个功能。如何实现此功能。

【问题讨论】：

使用状态和计时器实现类组件，每次您希望进度条移动时，都会增加状态的属性。你可以在这里找到简单的计时器示例reactjs.org/docs/state-and-lifecycle.html

标签： reactjs react-transition-group react-motion react-spring

【解决方案1】：

我希望你仍然对这个问题感兴趣。我只是修补 react-spring，我真的很喜欢它。 React IMHO 中最好的动画库。

您可以使用 Spring 组件创建一个整洁的组件。它将始终为 Spring 组件的 to 属性设置动画。第一次来自 from 属性的 from 值。

import React from "react";
import { Spring } from "react-spring";

const VerticalProgress = ({ progress }) => {
  return (
    <Spring from={{ percent: 0 }} to={{ percent: progress }}>
      {({ percent }) => (
        <div className="progress vertical">
          <div style={{ height: `${percent}%` }} className="progress-bar">
            <span className="sr-only">{`${progress}%`}</span>
          </div>
        </div>
      )}
    </Spring>
  );
};

export default VerticalProgress;

这里是完整的代码：https://codesandbox.io/s/mqo1r9wo4j

【讨论】：

我怎样才能在这个进度条中使用工具提示，如果我的进度条在 50% 并且我将鼠标移到那里然后悬停工具提示应该显示像这个谷歌图表 lnnk.in/jCg
我不是工具提示专家。我在工作中使用的组件库是专有的。但我认为您可以使用任何类型的工具提示。例如：w3schools.com/howto/howto_css_tooltip.asp

【解决方案2】：

Horizontal Example

这里是怎么做的。

制作 2 个 div（容器，进行中的一个）你可以根据状态变化来改变正在进行的 div 的高度。

const styled = styled.default;

const Bar = styled.div`
  position: relative;
  height: 500px;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin: 1rem auto;
`

const Fill = styled.div`
  background: #0095da;
  width: 100%;
  border-radius: inherit;
  transition: height 0.2s ease-in;
  height: ${(props) => `${props.percentual}%`};
`

const ProgressBar = ({ percentage }) => {

  return (
    <div>
      <Bar>
        <Fill percentage={percentage} />
      </Bar>
    </div>
  );
}

ReactDOM.render(<ProgressBar percentage={you state for progress percentage} />, document.getElementById('bar'));

您甚至不需要为此做出反应。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label_js

【讨论】：