如何用动画在 react-transition-group 中显示垂直进度条
How to show Vertical Progress Bar in react-transition-group with animation
Here 是进度条动画的 jQuery 示例。我希望 Reactjs 中没有 jQuery 的这个功能。如何实现此功能。
这是操作方法。
制作 2 divs(容器,进行中的一个)
您可以根据状态变化更改进度 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
我希望你仍然对这个问题感兴趣。我只是修补 react-spring 并且我真的很喜欢它。恕我直言,React 中最好的动画库。
您可以使用 Spring 组件创建一个简洁的组件。它将始终动画到 Spring 组件的 属性。第一次从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;
Here 是进度条动画的 jQuery 示例。我希望 Reactjs 中没有 jQuery 的这个功能。如何实现此功能。
这是操作方法。
制作 2 divs(容器,进行中的一个) 您可以根据状态变化更改进度 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
我希望你仍然对这个问题感兴趣。我只是修补 react-spring 并且我真的很喜欢它。恕我直言,React 中最好的动画库。
您可以使用 Spring 组件创建一个简洁的组件。它将始终动画到 Spring 组件的 属性。第一次从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;