Komponen Pilih Animasi menggunakan skrip taip, shadcn dan gerakan pembingkai

"Expand Select Animation" ialah komponen pilihan tersuai yang dibina menggunakan TypeScript dan Framer Motion, dengan komponen asas disediakan oleh ShadCN. Komponen ini meningkatkan elemen pilihan standard dengan animasi yang licin dan menarik secara visual yang mengembang ke bawah untuk mendedahkan pilihan dan runtuh ke atas untuk menyembunyikannya.

Demo

Kod Sumber

kembangkan-pilih.tsx

import { Globe } daripada "lucide-react";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } daripada "@/components/ui/select";
import { motion, AnimatePresence } daripada "framer-motion";

fungsi eksport ExapanSelect() {
  kembali (
    <Pilih>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d] ring-none border-none ">
        <Globe />
        <SelectValue placeholder="Bahasa Inggeris" />
      </SelectTrigger>
      <AnimatePresence>
        <SelectContent className="bg-[#3e3d3d] text-white border-none p-[1px]">
          <motion.div
            permulaan={{ kelegapan: 0, ketinggian: 0, skala: 0.95 }}
            bernyawa={{
              kelegapan: 1,
              ketinggian: "auto",
              skala: 1,
              peralihan: {
                jenis: "musim bunga",
                kekakuan: 300,
                redaman: 30,
              },
            }}
            keluar={{
              kelegapan: 0,
              ketinggian: 0,
              skala: 0.95,
              peralihan: {
                tempoh: 0.2,
              },
            }}
           >




          

            
        <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>

Atas ialah kandungan terperinci Komponen Pilih Animasi menggunakan skrip taip, shadcn dan gerakan pembingkai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!