（十七）使用 react-transition-group 实现

多个元素之间的动画效果

1. App.js

import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
        this.handleAddItem = this.handleAddItem.bind(this)
    }
    render() {
        return (
            <Fragment>
                <TransitionGroup>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <CSSTransition key={index} timeout={1000} classNames="fade" unmountOnExit onEntered={(el) => { el.style.color = 'blue' }} appear={true}>
                                    <div>{item}</div>
                                </CSSTransition>
                            )
                        })
                    }
                </TransitionGroup>

                <button onClick={this.handleAddItem}>toggle</button>
            </Fragment>

        )
    }
    handleAddItem() {
        this.setState((prevState) => {
            return {
                list: [...prevState.list, 'item']
            }
        })
    }
}
export default App

2.index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'


ReactDOM.render(
  // <React.StrictMode>
  <App />,
  // {/* </React.StrictMode>, */}
  document.getElementById('root')
);

3.style.css

.fade-enter,
.fade-appear {
  opacity: 0;
}
.fade-enter-active,
.fade-appear-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}
.fade-enter-done {
  opacity: 1;
  color: red;
}

.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade-exit-done {
  opacity: 0;
}

E:\20201017-React\css-todo\todolist