React-组件-原生动画

React 过渡动画

• 在 React 中我们可以通过原生的 CSS 来实现过渡动画
• 但是 React 社区为我们提供了 react-transition-group 帮助我们快速过渡动画

import React from 'react';
import styled from 'styled-components';

const StyleDiv = styled.div`
  width: ${props => props.width};
  height: ${props => props.height};
  background: skyblue;
  opacity: ${props => props.opacity};
  transition: all 3s;
`

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 0,
            height: 0,
            opacity: 0
        }
    }

    render() {
        return (
            <div>
                <StyleDiv {...this.state}/>
                <button onClick={() => {
                    this.btnClick()
                }}>按钮
                </button>
            </div>
        );
    }

    btnClick() {
        this.setState({
            width: '100px',
            height: '100px',
            opacity: 1
        })
    }
}

export default App;