2

複雑なアニメーションを作成する必要があります。jQuery や VanillaJS で開発するのはクールでしたが、React では別の方法を選択する必要があると思います。Google から ReactCSSTransitionGroup が提供されましたが、壊れていてメンテナンスされていないようです (このメッセージによると: github.com )。たとえば、アニメーションを開始する前に遅延することはできません。

React-motion というライブラリも見つけましたが、実際に必要なツールかどうかはわかりません。そこでお聞きしたいのですが、お勧めできるものはありますか？おそらく、VanillaJS を使用する必要があります (refs およびその他の ReactDOM 関数を使用)。または、別のアプローチがありますか？前もって感謝します。

4

3 に答える 3

2

React でアニメーションを行う最も簡単な方法は、実際には Web 上のどこでも、CSS Transitionsを使用することです。

CSS Transitions は、実際には React とは何の関係もありません。MDNを引用し、

CSS Transitionsは、特定の CSS プロパティの値の間で段階的なトランジションを作成できる CSS のモジュールです。これらのトランジションの動作は、タイミング関数、期間、およびその他の属性を指定することで制御できます。

CSS トランジションは純粋な CSS であるため、React アプリケーション、Angular、プレーンな Javascript、または Javascript をまったく使用しない古い学校のサーバー レンダリング ページでさえも使用できます。

これは、最も用途が広く強力な手法ではありません。しかし、たいていの場合、必要なアニメーションは非常に単純なので、単純なもので十分なのに、なぜもっと複雑なものを探す必要があるのでしょうか?

CSS トランジションは、バージョン 10 未満の Opera Mini と IE を除いて、すべての主要なブラウザーでも十分にサポートされています。

CSS トランジションは、2 つの CSS 状態の間をアニメーション化する機能を提供します。引き出しの開閉をアニメーション化するとします (ボタンのクリックによってトリガーされます)。引き出しの周りにflexコンテナがあるとしましょう。引き出しが開いたとき、コンテナの幅の 100% を占めるようにしたいので、100% にするmax-width必要があります。閉じている場合、幅は 0 になります。2 つの CSS スタイルを作成できます。

/* This CSS style is applied when the drawer is opened */
const openedStyle = {
  maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
};

/* This CSS style is applied when the drawer is closed */
const closedStyle = {
  maxWidth: 0 /* max-width is 0 in the closed drawer */,
};

次に、開閉イベントを処理し、開閉時にこれらのクラスのいずれかを引き出しオブジェクトに適用します。

class Drawer extends React.Component {
  state = {
    opened: false // Initially search form is Closed
  };

  toggleOpened = () =>
    // Toggle opened / closed state.
    // Because we rely on the previous state, we need to use
    // a functional setState form
    // https://ozmoroz.com/2018/11/why-my-setstate-doesnt-work/
    this.setState(state => ({ ...state, opened: !state.opened }));

  render() {
    const { opened } = this.state;
    return (
      <div className="drawer-container col-12 col-md-4">
        <input
          type="text"
          className="drawer"
          // Apply 'openedStyle' CSS class if the drawer is opened,
          // and 'closedStyle' if the drawer is closed.
          style={opened ? openedStyle : closedStyle}
        />
        <button
          type="button"
          className="open-close-button btn btn-primary"
          onClick={this.toggleOpened}
        >
          {opened ? 'Close' : 'Open'}
        </button>
      </div>
    );
  }
}

export default Drawer;

「開く/閉じる」ボタンを押すと、引き出しが 0 から 100% の幅の間で反転し、効果的に開閉します。

シンプルなボックストグル

あとはアニメーション化するだけです。

そのためには、秘密の要素である CSStransitionプロパティが必要です。次のスタイルをドロワーに追加するだけです。

/* This CSS style is applied when the drawer is opened */
const openedStyle = {
  maxWidth: '100%' /* max-with is 100% when the drawer is opened */,
  /* Upon transitioning to Open,
     animate `max-width' for 0.5s*/
  transition: 'max-width 0.5s'
};

/* This CSS style is applied when the drawer is closed */
const closedStyle = {
  maxWidth: 0 /* max-width is 0 in the closed drawer */,
  /* Upon transitioning to Closed,
     animate `max-width' for 0.5s */
  transition: 'max-width 0.5s'
};

ほら！アニメーションができました。ボタンをクリックすると、ドロワーが 0.5 秒以内に展開および縮小されます。

幅遷移

簡単に言えばこれだけですが、他にも次のようなものがあります。

  • CSS トランジションを使用して、複数の CSS 属性をアニメーション化できます。
  • 遷移可能なプロパティに遅延を適用できます。つまり、最初に不透明度をアニメーション化し、0.5 秒の遅延後に同じ要素の幅をアニメーション化します。
  • さまざまなタイミング関数をトランジションに適用できます。

上記のすべてを説明する拡張ブログ投稿を書きました: CSS トランジションによる痛みのない React アニメーション。

于 2019-03-26T02:41:46.947 に答える