Implementing Transition Effects in React Js When State Changes

Implementing transition effects in React JS when state changes

As @pgsandstrom mentioned, React Transition Group is the way to go. Unfortunately, it's not very developer friendly (pretty steep learning curve).

Here's a working example: https://codesandbox.io/s/6lmv669kz

✔ Original image zooms in while fading out

✔ New image zooms in while fading in

TransitionExample.js

import random from "lodash/random";
import React, { Component } from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import uuid from "uuid/v1";

const arr = [
  {
    id: uuid(),
    url: `https://loremflickr.com/600/100?lock=${random(0, 999)}`
  },
  {
    id: uuid(),
    url: `https://loremflickr.com/600/100?lock=${random(0, 999)}`
  },
  {
    id: uuid(),
    url: `https://loremflickr.com/600/100?lock=${random(0, 999)}`
  }
];

export default class TransitionExample extends Component {
  state = {
    index: 0,
    selected: arr[0]
  };

  nextImage = () =>
    this.setState(prevState => {
      const newIndex = prevState.index < arr.length - 1 ? prevState.index + 1 : 0;
      return {
        index: newIndex,
        selected: arr[newIndex]
      };
    });

  render = () => (
    <div className="app">
      <div style={{ marginBottom: 30, height: 100 }}>
        <TransitionGroup>
          <CSSTransition
            key={this.state.selected.id}
            timeout={1000}
            classNames="messageout"
          >
            <div style={{ marginTop: 20 }}>
              <img className="centered-image" src={this.state.selected.url} />
            </div>
          </CSSTransition>
        </TransitionGroup>
      </div>
      <div style={{ textAlign: "center" }}>
        <button
          className="uk-button uk-button-primary"
          onClick={this.nextImage}
        >
          Next Image
        </button>
      </div>
    </div>
  );
}

styles.css

.app {
  margin: 0 auto;
  overflow: hidden;
  width: 700px;
  height: 800px;
}

.centered-image {
  display: block;
  margin: 0 auto;
}

/* starting ENTER animation */
.messageout-enter {
  position: absolute;
  top: 0;
  left: calc(13% + 5px);
  right: calc(13% + 5px);
  opacity: 0.01;
  transform: translateY(0%) scale(0.01);
}

/* ending ENTER animation */
.messageout-enter-active {
  opacity: 1;
  transform: translateY(0%) scale(1);
  transition: all 1000ms ease-in-out;
}

/* starting EXIT animation */
.messageout-exit {
  opacity: 1;
  transform: scale(1.01);
}

/* ending EXIT animation */
.messageout-exit-active {
  opacity: 0;
  transform: scale(4);
  transition: all 1000ms ease-in-out;
}

Apply transition animation when mapped array changes state in react.js

To animate, you can use css transitions. However you'll probably have to keep some extra state to control when the animation has started or ended. This is not something that is very easy to do in React. Some libraries help you with this, such as react-spring, for example.

How to animate change of state made by React this.setState({})?

You can use react-transition-group package for that.
just import TransictionGroup and CSSTransition from that component and wrap your JSX you need to animate. It requires a key on basis of which you need to animate, that is some state in your case.

import { CSSTransition, TransitionGroup } from 'react-transition-group';

      <TransitionGroup>
        <CSSTransition key={this.state.value} timeout={1000} classNames="messageout">
         <YOURJSX/>
        </CSSTransition>
      </TransitionGroup>

Here is an example of it: https://codesandbox.io/s/nice-dubinsky-zmwpu

React animate element when property changes?

I had a similar issue a few weeks ago. The issue is that the ReactCSSTransitionGroup needs to be rendered before it's children. In your example both ReactCSSTransitionGroup and this.props.statusMessage.text will be rendered at the same time when this.props.selectedPlayerName === true.

I found this article that might be useful: here

Recently while using the ReactCSSTransitionGroup add-on for React.js, I ran into the issue of not being able to apply the enter transitions to the child elements when the component is first rendered to the DOM.

When the component is initially rendered, both the
ReactCSSTransitionGroup and all of its child elements appear in the
DOM at the same time. However, the ReactCSSTransitionGroup will only
apply the appropriate animation classes to any child elements which
enter the DOM after the initial render.

React animation: doubled element on state change

Remove the exit animation by setting the transitionLeave property to false, and remove the transitionLeaveTimeout property entirely. You've configured ReactCSSTransitionGroup to animate on enter and leave with a 500ms timer.

In my opinion, the transition would be nicer if the exiting Slide fades out while the entering Slide fades in. For this effect, you would need both Slide elements to be on top of each other, via absolute positioning. Here's an example of this: http://codepen.io/yeahjohnnn/pen/rrobvR

---

Related Topics