ReactとAnimsitionを使って、コンポーネント切り替えにアニメーションを追加したい

Question

Reactで画面切り替え（ページの遷移はありません）をおこなう際にアニメーションを付与したいと考えています。エラーなどは出ていないのですが、正常に動いておらず困っています。

＜開発環境＞

React: 16.4.2
Animsition
http://git.blivesta.com/animsition/

下記のソースコードで実行すると、ローディング画面のものがずっと動いているような画面になってしまいます。

ソースコード

scrren-oneからscreen-twoへ「次へ進む」を押した時に遷移できるような仕様にしたいです。

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      screens: {
        first: true,
        second: false,
      },
   }


  // Screen2へ遷移する場合の処理
  _next = event => {
      this.setState({
        screens: {
          first: false,
          second: true
        }
      });
    }

  render() {
    return (
      <div className="App">
        <section
          id="screen-one"
          style={{ display: this.state.screens.first ? 'block' : 'none' }}
          >

            <a href="#screen-two" className="animsition" onClick={this._next}>次へ進む</a>
        </section>

        <section
          id="screen-two"
          style={{ display: this.state.screens.second ? 'block' : 'none' }}
          >

        </section>
     </div>
  }
}

$(document).ready(function() {
  $(".animsition").animsition({
    inClass: 'fade-in-up',
    outClass: 'fade-out-up',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.animsition-link',
    // e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
    loading: true,
    loadingParentElement: 'body', //animsition wrapper element
    loadingClass: 'animsition-loading',
    loadingInner: '', // e.g '<img src="loading.svg" />'
    timeout: false,
    timeoutCountdown: 5000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    // "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    // The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });
});

根本的に遷移のやり方がが間違っているのかもしれません。
なにかいいアイデアがあれば教えていただければと思います。

Answer 1

それはReactを始めとするJSフレームワーク全般とjQueryが相反する概念のツールだからです。
基本的にJSフレームワークとjQueryは同時に使用してはいけません。

jQueryはDOMを手作業で書き換える事で画面の変更を促します。
アニメーションも1秒間に約60回のペースで、まるでパラパラ漫画のようにstyle属性のCSSプロパティ値を書き換える事でアニメーションを実現させています。

Reactを含むJSフレームワークは自分のフレームワークの世界に変数をもたせて、
テンプレートを読み込ませて上げつつ、変数に従って常に最新のDOMを表示するようにしろと命令します。
要するに「jQueryやDOM APIを使ってHTMLを変更する事自体が人間のやることじゃない」と言ってるわけですね。

なので基本的にJSフレームワークというのはアニメーションと相性が良くないものなのです。
CSSアニメーションで頑張るべきなのですが、
JSフレームワークを使いつつJS主導のアニメーションがしたいというライブラリも多く実装されているようです。

この辺の記事を読みながらReactでのアニメーション用のライブラリを探してみてください。
https://qiita.com/nabepon/items/c005a7d4491fd04b453e

Comments

[marutama_giant]

ありがとうございます。ご指摘通り対応していきます。