ReactCSSTransition animation isn't smooth for image

Question

I tried to implement fade in/fade out animation in React using ReactCSSTransitionGroup. I followed this solution in of previous SO answers. I have a component which contains an image and text. Animation is smooth for text, but not for the image. It looks like image flickers during animation.

jsfiddle

js

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var items = [
    {id: 1, text: "item1", img: "https://mirrors.creativecommons.org/presskit/icons/cc.large.png"},
  {id: 2, text: "item2", img: "https://mirrors.creativecommons.org/presskit/icons/by.large.png"},
  {id: 3, text: "item3", img: "https://mirrors.creativecommons.org/presskit/icons/nc.large.png"},
  {id: 4, text: "item4", img: "https://mirrors.creativecommons.org/presskit/icons/nc-eu.large.png"},
]

function findObjectByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var SwitchContent = React.createClass({
    render: function() {
        var obj = findObjectByKey(items, 'id', this.props.id);
        console.log(obj);

        return (
            <div>
        <style
            dangerouslySetInnerHTML={{
              __html: [
                '.backgroundImg {',
                '  background: url('+obj.img+');',
                '  background-size: auto 100px;',
                '}',
              ].join('\n'),
            }}
          />
         <div className="backgroundImg" />
         <div className="textContent">{obj.text}</div>
      </div> 
        );

    }
});

var Switch = React.createClass({
    getInitialState: function() {
        return {
            id: 1,
        };
    },
    toggle: function(e) {
        this.setState({ id: this.state.id === 4 ? 1 : this.state.id + 1 });
    },
    render: function() {
        var key = this.state.id;

        return (
            <div>
              <button onClick={this.toggle}>Toggle</button>
              <ReactCSSTransitionGroup
              transitionAppear
        transitionAppearTimeout={500}
        transitionLeaveTimeout={500}
        transitionEnterTimeout={500}
              className="container"
              transitionName="example">
                <div key={key} className="item_container">
                  <SwitchContent id={key} />
                </div>
              </ReactCSSTransitionGroup>
            </div>
        );

    }
});

React.render(<Switch/>, document.getElementById("switch"));

CSS

.backgroundImg {
  background-repeat: no-repeat;
  background-position: center center;
  background-color: black;
  width: 100px;
  height: 100px;
}

.container {
    position: relative;
}
.container > div {
    position: absolute;
}
.button {
    display: block;
    height: 100px;
    width: 100px;
    border: 1px solid #aaa;
    border-radius: 25px;
    font: bold 20px Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    color: #fff;
    background-color: #000;
    /* Define transition on the "opacity" property. */    
    transition: opacity 0.5s ease-in;
}
.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

score 2 · Accepted Answer · answered Apr 12 '18 at 12:42

Try setting the transition-delay value for .example-enter.example-enter-active CSS class and ease-in-out as transition-timing-function:

.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in-out 500ms;
}

.example-leave.example-leave-active {
   opacity: 0.01;
   transition: opacity 500ms ease-in-out;
 }

Looks smoother this way. Forked JSFiddle

score 1 · Answer 2 · answered Apr 12 '18 at 14:51

Not sure exactly what's happening in your fiddle and why it looks like the next image isn't easing in.

I did however rewrote your example in the latest react and using generators and all seems to be working ok.

You were missing the example-appear classes but I think there's more to it. You can look at my sandbox here: https://codesandbox.io/s/zw0xv4vy3x

If , based on this working example, you are able to find out what's wrong with yours then great ! If not, just copy & paste and you should be good.

js

import React, { Component } from "react";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
import { render } from "react-dom";
import "./main.css";

function* continuosArrayIterator(arr) {
  let idx = 0;
  while (idx < arr.length) {
    let ret = arr[idx];
    idx++;
    if (idx === arr.length) {
      idx = 0;
    }
    yield ret;
  }
}

class App extends Component {
  constructor() {
    super();
    this.clickHandler = this.clickHandler.bind(this);
    this.items = [
      {
        id: 1,
        text: "item1",
        img: "https://mirrors.creativecommons.org/presskit/icons/cc.large.png"
      },
      {
        id: 2,
        text: "item2",
        img: "https://mirrors.creativecommons.org/presskit/icons/by.large.png"
      },
      {
        id: 3,
        text: "item3",
        img: "https://mirrors.creativecommons.org/presskit/icons/nc.large.png"
      },
      {
        id: 4,
        text: "item4",
        img:
          "https://mirrors.creativecommons.org/presskit/icons/nc-eu.large.png"
      }
    ];
    this.imageIterator = continuosArrayIterator(this.items);
    this.state = {
      image: this.imageIterator.next().value
    };
  }

  clickHandler(event) {
    return this.setState({
      image: this.imageIterator.next().value
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Next Image</button>
        <ReactCSSTransitionGroup
          transitionAppear={true}
          transitionLeaveTimeout={500}
          transitionEnterTimeout={500}
          className="container"
          transitionName="example"
        >
          <div
            key={this.state.image.id}
            style={{
              position: "absolute",
              backgroundImage: `url(${this.state.image.img}`,
              backgroundSize: "auto 100px",
              height: "100px",
              width: "100px"
            }}
          />
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

css

.container {
  position: absolute;
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

ReactCSSTransition animation isn't smooth for image

2 Answers2