使用 typescript、shadcn 和 framer-motion 的动画选择组件

“展开选择动画”是使用 TypeScript 和 Framer Motion 构建的自定义选择组件，基础组件由 ShadCN 提供。该组件通过流畅、视觉上吸引人的动画增强了标准选择元素，该动画向下展开以显示选项，向上折叠以隐藏它们。

演示

源代码

expand-select.tsx

从“lucide-react”导入{ Globe }；
从“@/components/ui/select”导入{ Select、SelectContent、SelectGroup、SelectItem、SelectTrigger、SelectValue }；
从“framer-motion”导入{motion，AnimatePresence}；

导出函数 ExapandSelect() {
  返回 （
    
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a]hover:bg-[#3e3d3d]ring-none border-none">
        >
        <selectvalue placeholder="English"></selectvalue>>;
      </选择触发器>
      <动画存在>
        <SelectContent className="bg-[#3e3d3d] text-white border-none p-[1px]">
          




          

            
        <script>
  // Detect dark theme
  var iframe = document.getElementById('tweet-1878086086502887693-992');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1878086086502887693&theme=dark"
  }

</script>

以上是使用 typescript、shadcn 和 framer-motion 的动画选择组件的详细内容。更多信息请关注PHP中文网其他相关文章！