当前位置：首页 > React

react实现左移动画

2026-01-27 11:11:03React

实现左移动画的几种方法

使用CSS Transition

通过CSS的transition属性结合transform实现平滑的左移动画效果。

.slide-left {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

.slide-left.active {
  transform: translateX(0);
}

import { useState } from 'react';

function SlideLeftComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <div className={`slide-left ${isActive ? 'active' : ''}`}>
        内容区域
      </div>
      <button onClick={() => setIsActive(!isActive)}>
        切换动画
      </button>
    </div>
  );
}

使用CSS Animation

定义关键帧动画实现更复杂的左移效果。

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-animation {
  animation: slideInLeft 0.5s forwards;
}

function AnimationComponent() {
  const [animate, setAnimate] = useState(false);

  return (
    <div>
      {animate && (
        <div className="slide-animation">
          动画内容
        </div>
      )}
      <button onClick={() => setAnimate(true)}>
        触发动画
      </button>
    </div>
  );
}

使用React Spring库

通过物理动画引擎实现更自然的运动效果。

import { useSpring, animated } from 'react-spring';

function SpringComponent() {
  const [toggle, setToggle] = useState(false);
  const styles = useSpring({
    transform: toggle ? 'translateX(0)' : 'translateX(-100%)',
    config: { tension: 250, friction: 20 }
  });

  return (
    <div>
      <animated.div style={styles}>
        可拖拽内容
      </animated.div>
      <button onClick={() => setToggle(!toggle)}>
        切换状态
      </button>
    </div>
  );
}

使用Framer Motion库

提供声明式动画API和手势支持。

react实现左移动画

import { motion } from 'framer-motion';

function FramerComponent() {
  return (
    <motion.div
      initial={{ x: -100 }}
      animate={{ x: 0 }}
      transition={{ type: 'spring', stiffness: 100 }}
    >
      高级动画内容
    </motion.div>
  );
}