react弹窗动效组件(兼容小程序)

react弹窗动效组件(兼容小程序)

react弹窗动效组件

目录

react弹窗动效组件

封装背景

使用效果

封装背景

小程序中使用css3动画会有卡顿问题，决定封装一个组件来解决这个问题，然后发现 css中 will-change 可以有效的解决动画卡顿问题，所以做了如下封装。

使用效果

弹窗底部弹起效果

弹窗中间弹起效果 

 使用方法(只需嵌套到最外层，就可以实现动效，用法简单)

import ModalAnimate from '../ModalAnimate/ModalAnimate';<ModalAnimate>弹窗内容</ModalAnimate>

组件属性

组件源码

ModalAnimate.jsx

import React from "react"
import './ModalAnimate.less'class ModalAnimate extends React.Component {constructor(props) {super(props)this.state = {isActive: false}}componentDidMount() {setTimeout(() => {this.setState({isActive: true})}, 50)}render() {const { type = 'center' } = this.propsconst cls = ['modalAnimate']if (type === 'bottom') cls.push('modalBottomIn')if (type === 'center') cls.push('modalZoomIn')if (this.state.isActive) cls.push('active')return (<div className={cls.join(' ')}>{this.props.children}</div>)}
}export default ModalAnimate

ModalAnimate.less

.modalAnimate {width: 100%;height: 100%;transition: all 0.3s ease;will-change: contents;opacity: 1;
}.modalZoomIn {transform: scale3d(0.1, 0.1, 1);&.active {transform: scale3d(1, 1, 1);}
}.modalBottomIn {transform: translate3d(0, 100%, 0);&.active {transform: translate3d(0, 0, 0);}
}

新增活动修改动效可以参考上面的部分。兼容小程序等兼容性良好