Home>

I want to add animation when switching screens (no page transition) with React. There are no errors, but it is not working properly.

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

If i run the following source code, the loading screen will be in motion.

Source code

I want to make a specification that allows you to transition from scrren-one to screen-two when you press "Next".

class App extends Component {
  constructor (props) {
    super (props);
    this.state = {
      screens: {
        first: true,
        second: false,
      },
   }

  // Processing when transitioning to Screen2
  _next = event =>{
      this.setState ({
        screens: {
          first: false,
          second: true
        }
      });
    }
  render () {
    return (
      <div className = "App">
        <section
         
          style = {{display: this.state.screens.first? 'block': 'none'}}
          >
            <a href = "# screen-two" className = "animsition" onClick = {this._next}>Next</a>
        </section>
        <section
         
          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;
  });
});

The transition may be radically wrong.
If i have any good ideas, please let me know.

  • Answer # 1

    It is a conceptual tool that contradicts JQuery in general, including React, and jQuery in general.
    Basically you should not use JS framework and jQuery at the same time.

    jQuery prompts you to change the screen by manually rewriting the DOM.
    The animation is also realized by rewriting the CSS property value of the style attribute at a pace of about 60 times per second, just like a flip book.

    JS frameworks including React have variables in their framework world,
    Instructs to load the template and always display the latest DOM according to the variable.
    In short, it means that changing HTML using jQuery or DOM API is not something humans do.

    So basically the JS framework is not compatible with animation.
    I should do my best with CSS animation,
    It seems that many libraries that want to use JS-driven animation while using the JS framework are implemented.

    Look at the library for animation in React while reading this article.
    https://qiita.com/nabepon/items/c005a7d4491fd04b453e