使用 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]">
          <motion.div>




          

            
        <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></motion.div></selectcontent></selecttrigger>

以上是使用 typescript、shadcn 和 framer-motion 的動畫選擇組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！