Как показать вертикальный индикатор выполнения в реакции-переходной группе с анимацией

Question

Вот пример jQuery для анимации индикатора выполнения. и я хочу эту функцию в Reactjs без jQuery. Как реализовать эту функцию.

Answer 1

Горизонтальный пример

Вот как это сделать.

Сделав 2 деления (контейнер, прогрессирующий один), вы можете изменить высоту прогрессивного деления в зависимости от изменения состояния.

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

Answer 2

Я надеюсь, что вы все еще заинтересованы в этом вопросе. Я просто возился с реагирующей весной, и мне это очень нравится. Лучшая анимационная библиотека в React IMHO.

Вы можете создать аккуратный компонент с помощью компонента Spring. Это всегда будет анимировать свойство to компонента Spring. Впервые от стоимости от свойства.

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