# css_animation

**Repository Path**: dirtypool/css_animation

## Basic Information

- **Project Name**: css_animation
- **Description**: 简单的React中实现CSS动画
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-02-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## React中实现CSS过度动画

根据js中的setState来改变标签的className，在css文件中定义

```css
.show{
  opacity: 1; //显示
  transition: all 1s ease-in;//渐进渐出
}

.hide{
  opacity: 0;
  transition: all 1s ease-in;
}
```

## React中实现CSS动画效果

通过`@keyframes`来定义一些动画，`forwards`用于实现保存最后一帧的样式

```css
.hide {
  animation: hide-item 2s ease-in forwards;
}

@keyframes hide-item {
  0% {
    opacity: 1;
    color: red;
  }
  50% {
    opacity: 0.5;
    color: green;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}
```

## 使用react-transition-group实现动画

### 使用CSSTransition

[React Transition Group文档](https://reactcommunity.org/react-transition-group/)，使用CSSTransition

js文件：

```jsx
import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={this.state.show}
  timeout={1000}
  classNames='fade'
  unmountOnExit //消失时删除DOM节点
  onEntered={(el) => {el.style.color='blue'}}//el指的是div标签
  appear={true}//实现一进入页面就显示
  >
  	<div>hello</div>
</CSSTransition>
```

css文件：

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

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

### 使用TransitionGroup

```jsx
import { CSSTransition, TransitionGroup } from 'react-transition-group';

<TransitionGroup>
{
  this.state.list.map((item,index) => {
    return (
      <CSSTransition
        timeout={1000}
        classNames='fade'
        unmountOnExit
        onEntered={(el) => { el.style.color = 'blue' }}
        appear={true}
        key={index}
      >
        <div>{item}</div>
      </CSSTransition>
    	)
  })
}
</TransitionGroup>
```

当list为一个数组时，使用`TransitionGroup`进行动画渲染