score:2

Accepted answer

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

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;
}

Related Query

More Query from same tag