对接购物车列表

src/components/popup/index.tsx

@@ -1,18 +1,19 @@
 import { View } from "@tarojs/components";
 import style from "./index.module.scss"
 import classnames from "classnames";
-import { memo, ReactNode, useMemo } from "react";
+import { memo, ReactNode, useEffect, useMemo, useRef } from "react";
 import CloseBtnIcon from "@/components/closeBtn"
 
 export interface Params {
-    title?: string,
-    show?: false|true,
-    showTitle?: false|true,
-    onClose?:() => void,
-    children?: ReactNode,
-    IconButton?: ReactNode,
-    showIconButton?: false|true,
-    position?: 'bottom'|'top'|'right'
+    title?: string, //标题
+    show?: false|true, //显示显示弹窗
+    showTitle?: false|true, //是否显示标题
+    onClose?:() => void, //关闭事件
+    children?: ReactNode, //插槽内容
+    // IconButton?: ReactNode, //
+    showIconButton?: false|true, //是否显示关闭按钮
+    position?: 'bottom'|'top'|'right', //弹出位置
+    animationEnd?: () => void //弹出动画结束
 }
 export default memo((
     {
@@ -22,9 +23,26 @@ export default memo((
         onClose, 
         showIconButton = false, 
         children,
-        position = 'bottom'
+        position = 'bottom',
+        animationEnd
     }:Params) => {
     
+    const animationTime = useRef<any>(null)
+    useEffect(() => {
+        if(show) {
+            animationTime.current = setTimeout(() => {
+                animationEnd?.()
+            }, 260)
+        } else {
+            clearTimeout(animationTime.current)
+        }
+    }, [show])
+
+    useEffect(() => {
+        return () => {
+            clearTimeout(animationTime.current)
+        }
+    }, [])
     
     return (
         <>