一个不错的下拉菜单

源文件：百度云下拉.framerx.zip

代码：

import * as React from "react"
import { Override, Data } from "framer"
const data = Data({
    isOpened: false,
})
export function Menu(props): Override {
    const variants = {
        open: {
            height: 277,
            transition: {
                delayChildren: 0.04,
                staggerChildren: 0.05,
                staggerDirection: -1,
            },
        },
        closed: {
            height: 88,
        },
    }
    //@ts-ignore
    return {
        initial: "closed",
        variants: variants,
        animate: data.isOpened ? "open" : "closed",
        transition: {
            duration: 0.1,
        },
    }
}
export function Item(props): Override {
    const variants = {
        open: {
            opacity: 1,
            y: 0,
            transition: {
                type: "spring",
                stiffness: 290,
                damping: 10,
                mass: 0.3,
            },
        },
        closed: {
            opacity: 0,
            y: -40,
            transition: {
                duration: 0.08,
            },
        },
    }
    return {
        variants: variants,
    }
}
//分类按钮
export function Button(): Override {
    return {
        onTap() {
            data.isOpened = !data.isOpened
        },
    }
}
//bg
export function Bg(): Override {
    return {
        opacity: 0,
        animate: data.isOpened ? { opacity: 1 } : { opacity: 0 },
        transition: {
            duration: 0.1,
        },
        onTap() {
            data.isOpened = !data.isOpened
        },
    }
}
//小三角
export function Icon(): Override {
    return {
        rotate: 0,
        animate: data.isOpened ? { rotate: 60 } : { rotate: 0 },
    }
}