Maison >interface Web >js tutoriel >Composant de sélection animé utilisant TypeScript, Shadcn et Framer-motion

Composant de sélection animé utilisant TypeScript, Shadcn et Framer-motion

Barbara Streisand
Barbara Streisandoriginal
2025-01-15 16:28:46853parcourir

Animated Select component using typescript, shadcn and framer-motion

Le "Expand Select Animation" est un composant de sélection personnalisé construit à l'aide de TypeScript et Framer Motion, avec le composant de base fourni par ShadCN. Ce composant améliore l'élément de sélection standard avec une animation fluide et visuellement attrayante qui se développe vers le bas pour révéler les options et se réduit vers le haut pour les masquer.

Démo

Code source


expand-select.tsx


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

fonction d'exportation ExapandSelect() {
  retour (
    <Sélectionner>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d] ring-none border-none ">
        <Globe />
        <SelectValue placeholder="Anglais" />
      </SélectionnerDéclencheur>
      <AnimatePresence>
        <SelectContent className="bg-[#3e3d3d] texte-bordure blanche-aucun p-[1px]">
          <motion.div
            initial={{ opacité : 0, hauteur : 0, échelle : 0,95 }}
            animer={{
              opacité : 1,
              hauteur : "auto",
              échelle: 1,
              transition: {
                tapez : "ressort",
                rigidité : 300,
                amortissement : 30,
              },
            }}
            sortie={{
              opacité : 0,
              hauteur: 0,
              échelle : 0,95,
              transition: {
                durée : 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn