在React中写一个Animation组件为组件进入和离开加上动画/过度效果

前端  /  管理员 发布于 5年前   414

问题

在单页面应用中，我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果，为这么一个小功能引入第三方框架，实在有点小纠结。不如自己封装。

思路

原理

以进入时 opacity: 0 --> opacity: 1  ，退出时 opacity: 0 --> opacity: 1 为例

元素挂载时

1.挂载元素dom
2.设置动画 opacity: 0 --> opacity: 1

元素卸载时

1.设置动画 opacity: 0 --> opacity: 1
2.动画结束后卸载dom

组件设计

为了使得组件简单易用、低耦合，我们期望如下方式来调用组件：

属性名	类型	描述
isShow	Boolean	子元素显示或隐藏控制
name	String	指定一个name，动画进入退出时的动画

在 App.jsx 里调用组件：

通过改变isShow的值来指定是否显示

// App.jsx// 其他代码省略import './app.css';  
    demo  // 通过改变isShow的值来指定是否显示在 App.css 里指定进入离开效果：// 基础样式.demo {  width: 200px;  height: 200px;  background-color: red;}// 定义进出入动画.demo-showing {  animation: show 0.5s forwards;}.demo-fading {  animation: fade 0.5s forwards;}// 定义动画fade与show@keyframes show {  from {    opacity: 0;  }  to {    opacity: 1;  }}@keyframes fade {  from {    opacity: 1;  }  to {    opacity: 0;  }}

根据思路写代码

// Animation.jsximport { PureComponent } from 'react';import './index.css';class Animation extends PureComponent {  constructor(props) {    super(props);    this.state = {      isInnerShow: false,      animationClass: '',    };  }  componentWillReceiveProps(props) {    const { isShow } = props;    if (isShow) {      // 显示      this.show().then(() => {        this.doShowAnimation();      });    } else {      // 隐藏      this.doFadeAnimation();    }  }  handleAnimationEnd() {    const isFading = this.state.animationClass === this.className('fading');    if (isFading) {      this.hide();    }  }  show() {    return new Promise(resolve => {      this.setState(        {          isInnerShow: true,        },        () => {          resolve();        }      );    });  }  hide() {    this.setState({      isInnerShow: false,    });  }  doShowAnimation() {    this.setState({      animationClass: this.className('showing'),    });  }  doFadeAnimation() {    this.setState({      animationClass: this.className('fading'),    });  }  /**   * 获取className   * @param {string} inner 'showing' | 'fading'   */  className(inner) {    const { name } = this.props;    if (!name) throw new Error('animation name must be assigned');    return `${name}-${inner}`;  }  render() {    let { children } = this.props;    children = React.Children.only(children);    const { isInnerShow, animationClass } = this.state;    const element = {      ...children,      props: {        ...children.props,        className: `${children.props.className} ${animationClass}`,        onAnimationEnd: this.handleAnimationEnd.bind(this),      },    };    return isInnerShow && element;  }}export default Animation;

Demo示例

点我直达

总结

以上所述是小编给大家介绍的在React中写一个Animation组件为组件进入和离开加上动画/过度效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• React父子组件间的传值的方法
• react 兄弟组件如何调用对方的方法示例
• 详解React中传入组件的props改变时更新组件的几种实现方法
• react-native动态切换tab组件的方法
• React如何利用相对于根目录进行引用组件详解
• React实践之Tree组件的使用方法
• react 父组件与子组件之间的值传递的方法
• 详解React native全局变量的使用(跨组件的通信)