reactjs - アニメーションで react-transition-group に垂直プログレス バーを表示する方法

Question

プログレス バー アニメーションの jQuery の例を次に示します。jQueryを使わずにReactjsでこの機能が欲しいです。この機能を実装する方法。

Answer 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