typescript, shadcn 및 프레이머 모션을 사용하는 애니메이션 선택 구성 요소

"Expand Select Animation"은 ShadCN에서 제공하는 기본 구성 요소와 함께 TypeScript 및 Framer Motion을 사용하여 구축된 사용자 정의 선택 구성 요소입니다. 이 구성 요소는 아래로 확장되어 옵션을 표시하고 위로 축소하여 옵션을 숨기는 부드럽고 시각적으로 매력적인 애니메이션으로 표준 선택 요소를 향상합니다.

데모

소스 코드

expand-select.tsx

"lucide-react"에서 { Globe }를 가져옵니다.
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/comComponents/ui/select";
"프레이머 모션"에서 { 모션, AnimatePresence } 가져오기;

내보내기 함수 ExapandSelect() {
  반품 (
    <선택>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d] ring-none border-none ">
        <지구본 />
        <SelectValue placeholder="English" />
      </SelectTrigger>
      <AnimatePresence>
        <SelectContent className="bg-[#3e3d3d] text-white border-none p-[1px]">
          <motion.div
            초기={{ 불투명도: 0, 높이: 0, 배율: 0.95 }}
            애니메이션={{
              불투명도: 1,
              높이: "자동",
              규모: 1,
              이행: {
                유형: "봄",
                강성: 300,
                댐핑: 30,
              },
            }}
            종료={{
              불투명도: 0,
              높이: 0,
              규모: 0.95,
              이행: {
                기간: 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>

위 내용은 typescript, shadcn 및 프레이머 모션을 사용하는 애니메이션 선택 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!