React-transition-group: classNames is not work

[carly1987]

`

import './css/index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import CSSTransition from 'react-transition-group/CSSTransition';


class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      items: ['click', 'to', 'remove', 'an', 'item']
    }

  }

  removeItem(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({
      items: newItems
    });
  }
  render(){
    const { items } = this.state;
    const example = {
      appear: 'example-appear',
      appearActive: 'example-active-appear',
      enter: 'example-enter',
      enterActive: 'example-active-enter',
      exit: 'example-exit',
      exitActive: 'example-active-exit'
    }
    return (
      <div className="container">

          <CSSTransition
            classNames={example}
            timeout={1000}
          >
            <div className="animation-container">
            {
              items.map((item, i) => (
                <div key={item} onClick={()=>this.removeItem(i)} className={`item item-${item}`}>{item}</div>
              ))
            }
            </div>
          </CSSTransition>

      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

`

`

* {
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
  background: #ffffff;
  font-family: 'HelveticaNeue-Light', 'HelveticaNeue', 'Roboto', Helvetica, Arial, sans-serif;
  font-size: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

.container {
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}
.animation-container {
  display: inline-block;
}
.item {
  width: 400px;
  text-align: center;
  padding: 10px 5px;
  margin-top: 10px;
  border-radius: 8px;
  background: #ddd;
}
.item-click{
}
.example-enter {
  opacity: 0;
  transform:   translate(-250px,0);
  transform: translate3d(-250px,0,0);
}
.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 1s ease;
  transform:   translate(0,0);
  transform: translate3d(0,0,0);
  transition-property: transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}
.example-exit {
  opacity: 1;
  transform: translate(0,0);
  transform: translate3d(0,0,0);
  transition-property: transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.175, 0.665, 0.320, 1), linear;
}
.example-exit.example-exit-active {
  opacity: 0;
  transform:   translate(250px,0);
  transform: translate3d(250px,0,0);
}

`

[harshattray]

The way you are importing CSS.. not sure if thats the right way.
instead of import './css/index.css';
try importing import styles from './css/index.css'
make sure you export the collective styles in your CSS file. using export default

[jquense]

There is a bunch wrong with your example, the imported css (as pointed out) and a few other typos, I'd make sure your code is working correctly by debugging it.

[carly1987]

`

import './css/index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import {TransitionGroup, Transition} from 'react-transition-group';

class TodoList extends React.Component {
constructor(props) {
super(props)
this.state = {items: ['hello', 'world', 'click', 'me']}
}
handleAdd() {
const newItems = this.state.items.concat([
prompt('Enter some text')
]);
this.setState({ items: newItems });
}
handleRemove(i) {
let newItems = this.state.items.slice();
newItems.splice(i, 1);
this.setState({items: newItems});
}
render() {
return (

{this.state.items.map((item, i) => (

{item}{' '}

remove

))}