1

私はアニメーションに反応して反応するのが初めてです。そのため、ページの読み込み時に「表示」アニメーションを使用すると、すべてが機能します。しかし今、私には問題があります。ナビゲーションをクリックすると、新しい div がすぐに表示されるだけでなく、ゆっくりとフェードイン (またはそのマザーの他のアニメーション) されますが、機能しません。

TLDR; onClick イベントは、設定したばかりのアニメーションを新しいクラスにしません。

また、Web サイトの特定の部分にスクロールしたときにのみ ReactCSSTransitionGroup が機能するようにする方法を誰かが知っているでしょうか? ありがとう！

import React from "react";
import ReactDOM from "react-dom";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";

export default class Nav extends React.Component {
constructor() {
    super();
    this.state = {
        navStatus: "navHide"
    };
}

navClose(e) {
    e.stopPropagation();
    this.setState({
        navStatus: "navHide",
        navLines: "navLines show"
    });
}

navOpen() {
    this.setState({
        navStatus: "navShow",
        navLines: "navLines hide"
    });
}


render() {
    return(
        <nav>
            <div className={this.state.navLines} onClick={this.navOpen.bind(this)}>
            </div>
            <ReactCSSTransitionGroup transitionName="navShow" transitionAppear={true} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
            <div id="myNav" className={this.state.navStatus}>
                <div className="navClose" onClick={this.navClose.bind(this)}>
                    <img className="navCloseBtn" src="svg/close.svg"></img>
                </div>
            </div>
        </ReactCSSTransitionGroup>
        </nav>
    );
}

}

4

2 に答える 2

2

CSS クラスを処理する状態を削除します。React コンポーネントの状態から css-selector を分離することをお勧めします。状態から派生した css セレクターを管理するためのより良い方法があります

これらの線に沿って何かをしてください。これは、FE、React コードベース、複数のプロジェクトで使用してきた一般的なパターンです。保守が簡単で、純粋な JS を使用して BEM セレクターの作成を管理します。

render() {
  const { isOpen } = this.state;

  const classnames = [
    'nav',
    isOpen && 'nav--open'
  ].filter(Boolean);

  return (
    <nav className={classnames.join(' ')}>
      ...
    </nav>
  );
}

それでは、ReactCSSTransitionGroup について話しましょう。DOM ツリーからマウントおよびアンマウントする DOM 要素にフックされたアニメーションを追加しようとしている場合は、このアドオンを使用します。要素が DOM ツリーを離れていない場合は、上記のコード スニペットのように css-selectors を動的に適用してアニメーションを処理します。

React で何かをアニメーション化する必要があるときはいつでも ReactCSSTransitionGroups を使用しないでください。これはオーバーエンジニアリングです。

アニメーション化する最も親のセレクターに遷移プロパティを設定します。このようなもの...

.nav {
  ...
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

次の CSS を動的に適用される CSS セレクター (状態派生 CSS セレクター) に追加します。

.nav--open {
  opacity: 1;
}

これは、CSS セレクターを適用してアニメーションに何ができるかを示す簡単な Vanilla JS の例へのリンクです。

React と基本的な CSS トランジションを使用した例へのリンクを次に示します。

これは、React と CSSTransitionGroup を使用した別の例へのリンクです。ここでは、DOM 要素が DOM からマウントおよびマウント解除されます。

お役に立てれば！

于 2016-06-27T18:18:08.773 に答える
0

ReactCSSTransitionGrouponClick ハンドラーで子を削除する必要があります。このようなものが動作するはずです:

navClose(e) {
  this.setState({visible: false});
},

navOpen(e) {
  this.setState({visible: true});
}


render() {
  return(
      <nav>
        <div className={this.state.navLines} onClick={this.navOpen.bind(this)}>
        </div>
        <ReactCSSTransitionGroup transitionName="navShow" transitionAppear={true} transitionEnterTimeout={500} transitionLeaveTimeout={300}>
        { this.state.visible &&
          <div id="myNav" className={this.state.navStatus}>
            <div className="navClose" onClick={this.navClose.bind(this)}>
                <img className="navCloseBtn" src="svg/close.svg"></img>
            </div>
          </div>
        }
      </ReactCSSTransitionGroup>
    </nav>
  );
}
于 2016-06-27T18:16:12.427 に答える