taro微信小程序中的简单动画(模态框弹出)

// 充电桩项目中模态框

import { useRef, useEffect, useState, useMemo } from "react";
import "./index.less";
import Taro from "@tarojs/taro";
function Modal(props) {
  const modalNode = useRef();
  const [animationData, setAnimationData] = useState();
  // 第一次不渲染
  const [isRender, setIsRender] = useState(false);
  const animation = useMemo(() => {
    return Taro.createAnimation({
      duration: 150,
      timingFunction: "linear",
      delay: 0
    });
  }, []);
  useEffect(() => {
    if (props.show) {
      if (isRender) {
        modalNode.current.className = "Modal_r_";
      }
      setIsRender(true);
      animation.scale(0).step();
      setAnimationData(animation.export());
      Taro.nextTick(() => {
        animation.scale(1).step();
        setAnimationData(animation.export());
      });
    } else if (!props.show && isRender) {
      animation.scale(0).step();
      setAnimationData(animation.export());
      setTimeout(() => {
        modalNode.current.className = "hidden";
      }, 150);
    }
  }, [props.show]);
  return (
    <>
      {isRender && (
        <view
          className="Modal_r_"
          ref={modalNode}
          onClick={props?.clickMask || null}
        >
          <view
            className={"box_r_ " + props.className}
            animation={animationData}
            onClick={e => {
              e.stopPropagation();
            }}
          >
            <view className="title">{props.title}</view>
            {props.children}
          </view>
        </view>
      )}
    </>
  );
}
export default Modal;

// 以下是样式
// index.less
　　

.Modal_r_ {
  color: red;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .2);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .box_r_ {
    width: 576px;
    min-height: 354px;
    background-color: #fff;
    border-radius: 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
    .title {
      width: 284px;
      height: 80px;
      background-color: #5AD8D5;
      line-height: 80px;
      text-align: center;
      font-weight: bold;
      color: #FFFFFF;
      font-size: 42px;
      position: relative;
      &::before{
        position: absolute;
        top: -2px;
        left: -2px;
        display: block;
        content: '';
        border-top: 82px solid transparent;
        border-left: 32px solid #fff;
      }
      &::after{
        position: absolute;
        top: -2px;
        right: -2px;
        display: block;
        content: '';
        border-top: 82px solid transparent;
        border-right: 32px solid #fff;
      }
    }
  }
}


.hidden {
  display: none;
}