Animierte Auswahlkomponente mit Typescript, Shadcn und Framer-Motion

Die „Expand Select Animation“ ist eine benutzerdefinierte Auswahlkomponente, die mit TypeScript und Framer Motion erstellt wurde, wobei die Basiskomponente von ShadCN bereitgestellt wird. Diese Komponente erweitert das standardmäßige Auswahlelement um eine reibungslose, optisch ansprechende Animation, die nach unten erweitert wird, um Optionen anzuzeigen, und nach oben reduziert wird, um sie auszublenden.

Demo

Quellcode

expand-select.tsx

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

Exportfunktion ExapandSelect() {
  zurückkehren (
    <Auswählen>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d] ring-none border-none ">
        <Globus />
        <SelectValue placeholder="Englisch" />
      </SelectTrigger>
      <AnimatePresence>
        <SelectContent className="bg-[#3e3d3d] text-white border-none p-[1px]">
          <motion.div
            initial={{ Deckkraft: 0, Höhe: 0, Skalierung: 0,95 }}
            animieren={{
              Deckkraft: 1,
              Höhe: „auto“,
              Maßstab: 1,
              Übergang: {
                Typ: „Frühling“,
                Steifigkeit: 300,
                Dämpfung: 30,
              },
            }}
            Exit={{
              Deckkraft: 0,
              Höhe: 0,
              Maßstab: 0,95,
              Übergang: {
                Dauer: 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>

Das obige ist der detaillierte Inhalt vonAnimierte Auswahlkomponente mit Typescript, Shadcn und Framer-Motion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!