# animation_route

**Repository Path**: snowsunset/animation_route

## Basic Information

- **Project Name**: animation_route
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### yarn start 启动项目

### 应用首次加载时候的动画。
![首次加载.gif](https://upload-images.jianshu.io/upload_images/7505289-5ec4b40b1565437f.gif?imageMogr2/auto-orient/strip)


### 切换路由时候的动画
![切换.gif](https://upload-images.jianshu.io/upload_images/7505289-0fe7c06973f985d7.gif?imageMogr2/auto-orient/strip)



### 做react路由动画比较复杂，最好了解三个前提知识，
1. react动画组件，**react-transition-group** [文档](https://reactcommunity.org/react-transition-group/#Transition-prop-addEndListener)

2. react路由组件，**react-router** [文档](https://reacttraining.com/react-router/)

3. css动画语法， **CSS动画简介**  [文档](http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html)



### 直接上代码
>这里我直接用了官方的[demo代码](https://reacttraining.com/react-router/web/example/animated-transitions)，并且稍微改了一下动画样式。