React 动画通常有三种方法实现从易到难为:
- ,transition(CSS3 自带)
- ,animation(CSS3 自带)
3,react-transition-group 动画库(需要引入插件)
一, transition(CSS3 自带)
1, 用法示例:
- .hide{
- /* 过渡动画效果 */
- opacity: 1;
- transition: all 1s ease-in;
- }
含义: 透明度在 1s 内从 0 渐变为 1
2,transition 其他参数
建议参考 (http://www.runoob.com/cssref/css3-pr-transition.html) 详细学习
http://www.runoob.com/cssref/css3-pr-transition-property.html | 指定 CSS 属性的 name,transition 效果 |
http://www.runoob.com/cssref/css3-pr-transition-duration.html | transition 效果需要指定多少秒或毫秒才能完成 |
http://www.runoob.com/cssref/css3-pr-transition-timing-function.html | 指定 transition 效果的转速曲线 |
http://www.runoob.com/cssref/css3-pr-transition-delay.html | 定义 transition 效果开始的时候 |
3, 区别 transform
transform 属性向元素应用 2D 或 3D 转换. 该属性允许我们对元素进行旋转, 缩放, 移动或倾斜. 所以, transform 属性只对元素进行变换, 不会产生过渡效果.
建议参考 (http://www.runoob.com/cssref/css3-pr-transform.html) 详细学习
二, animation(CSS3 自带)
1, 用法示例:
- .hide{
- /* 过渡动画效果 */
- animation: animation-name 2s ease-in forwards;
- }
- @keyframes animation-name {
- 0% {
- opacity: 1;
- color: red;
- }
- 50% {
- opacity: 0.5;
- color: blue;
- }
- 100%{
- opacity: 0;
- color: yellow;
- }
- }
animation 相对于 transition 的好处是可以一帧一帧的控制动画, 自由度更高.
三, react-transition-group 动画库(需要引入插件)
1, 为什么要用 react-transition-group?
因为有一些动画用 animation 和 transition 很难实现甚至不能实现, 这时 react-transition-group 就非常必要啦
2, 安装 react-transition-group 库
yarn add react-transition-group
3, 官方文档地址: http://reactcommunity.org/react-transition-group/(强烈建议一定要先打开这个文档再继续向下阅读哦)
react-transition-group 库有三个可使用的组件:
- Transition http://reactcommunity.org/react-transition-group/transition
- CSSTransition http://reactcommunity.org/react-transition-group/css-transition
- TransitionGroup http://reactcommunity.org/react-transition-group/transition-group
(1)主要使用 CSSTransition(单标签的动画)和 TransitionGroup(多标签的动画)
(2)Transition 是更接近底层的动画, 当时用 CSSTransition 和 TransitionGroup 都不能实现需要的动画时可以考虑使用 Transition
4,React 使用示例:(核心部分均标蓝)
js 部分:
- import React,{ Component , Fragment} from 'react';
- // 引入 react-transition-group 动画组件
- import { CSSTransition,TransitionGroup } from 'react-transition-group';
- class AppTra extends Component{
- constructor(props){
- super(props);
- this.state = {
- list:[]
- };
- this.handleAddItem = this.handleAddItem.bind(this);
- }
- handleAddItem(){
- this.setState((prevState)=>{
- return{
- list: [...prevState.list,'666']
- }
- })
- }
- render(){
- return (
- // Fragment 是占位符
- <Fragment>
- <TransitionGroup>
- {
- this.state.list.map((item,index)=>{
- return(
- <CSSTransition
- in={this.state.show}
- // 动画时间
- timeout={1000}
- // 前缀名注意 S
- classNames='fade'
- unmountOnExit
- onEntered={(el)=>{
- el.style.color='blue'
- }}
- // 入场第一帧
- appear={true}
- key={index}
- >
- <div>{item}</div>
- </CSSTransition>
- )
- })
- }
- <button onClick={this.handleAddItem}>toggle</button>
- </TransitionGroup>
- </Fragment>
- )
- }
- }
- // 导出组件
- export default AppTra
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;
- }
大家动手试试吧
来源: https://www.cnblogs.com/piaobodewu/p/9410912.html