react弹窗动效组件

目录

react弹窗动效组件

封装背景

使用效果

---

封装背景

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

使用效果

弹窗底部弹起效果

弹窗中间弹起效果 

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

import ModalAnimate from '../ModalAnimate/ModalAnimate';


 <ModalAnimate>
      弹窗内容
 </ModalAnimate>

组件属性

属性值	类型	描述	默认值
type	string	弹窗从哪个地方弹起(bottom/center)	center

组件源码

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.props
    const 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);
  }
}

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