动画系统 #

<Box
  bg="blue.500"
  color="white"
  p={4}
  transition="all 0.3s"
  _hover={{ bg: 'blue.600', transform: 'translateY(-2px)' }}
>
  悬停查看过渡效果
</Box>

<Box
  transition="background-color 0.2s ease-in-out"
  _hover={{ bg: 'blue.600' }}
>
  指定过渡属性
</Box>

<Box
  transitionProperty="all"
  transitionDuration="normal"
  transitionTimingFunction="ease"
>
  使用过渡属性
</Box>

import { keyframes } from '@emotion/react'

const spin = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`

function Spinner() {
  return (
    <Box
      animation={`${spin} 1s linear infinite`}
      w="40px"
      h="40px"
      bg="blue.500"
    />
  )
}

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`

function FadeInBox() {
  return (
    <Box
      animation={`${fadeIn} 0.5s ease-in`}
      p={4}
      bg="green.500"
    >
      淡入效果
    </Box>
  )
}

import { motion } from 'framer-motion'

const MotionBox = motion(Box)

function AnimatedCard() {
  return (
    <MotionBox
      p={6}
      bg="white"
      borderRadius="lg"
      shadow="md"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      动画卡片
    </MotionBox>
  )
}

<MotionBox
  p={6}
  bg="blue.500"
  color="white"
  borderRadius="lg"
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  点击查看动画
</MotionBox>

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

function AnimatedList({ items }) {
  return (
    <MotionBox
      as="ul"
      variants={container}
      initial="hidden"
      animate="show"
    >
      {items.map((item, i) => (
        <MotionBox
          as="li"
          key={i}
          variants={item}
          mb={2}
          p={4}
          bg="gray.100"
          borderRadius="md"
        >
          {item}
        </MotionBox>
      ))}
    </MotionBox>
  )
}

const slideIn = keyframes`
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
`

function SlideInMenu({ isOpen }) {
  return (
    <Box
      position="fixed"
      left={0}
      top={0}
      h="100vh"
      w="250px"
      bg="white"
      shadow="lg"
      animation={isOpen ? `${slideIn} 0.3s ease-out` : undefined}
    >
      菜单内容
    </Box>
  )
}

const pulse = keyframes`
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
`

function PulseButton() {
  return (
    <Button
      animation={`${pulse} 2s infinite`}
      colorScheme="blue"
    >
      点击我
    </Button>
  )
}