当前位置：首页 > React

react中如何让元素滑动

2026-01-25 11:39:20React

使用 CSS 过渡动画

通过 CSS 的 transition 和 transform 属性实现平滑滑动效果。定义一个 CSS 类，通过状态切换触发动画。

.slide-element {
  transition: transform 0.3s ease-in-out;
}
.slide-right {
  transform: translateX(100px);
}

在 React 组件中动态切换类名：

function SlidingElement() {
  const [isSliding, setIsSliding] = useState(false);

  return (
    <div 
      className={`slide-element ${isSliding ? 'slide-right' : ''}`}
      onClick={() => setIsSliding(!isSliding)}
    >
      点击滑动
    </div>
  );
}

使用 React Spring 库

React Spring 提供声明式的动画 API，适合复杂滑动效果。安装库后，通过 useSpring 和 animated 组件实现。

npm install react-spring

示例代码：

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

function SpringSlide() {
  const [slide, setSlide] = useState(false);
  const styles = useSpring({
    transform: slide ? 'translateX(200px)' : 'translateX(0)',
  });

  return (
    <animated.div 
      style={styles}
      onClick={() => setSlide(!slide)}
    >
      点击滑动（React Spring）
    </animated.div>
  );
}

使用 Framer Motion 库

Framer Motion 提供更高级的动画控制，支持手势和物理效果。

npm install framer-motion

示例代码：

import { motion } from 'framer-motion';

function FramerSlide() {
  const [slide, setSlide] = useState(false);

  return (
    <motion.div
      animate={{ x: slide ? 100 : 0 }}
      onClick={() => setSlide(!slide)}
    >
      点击滑动（Framer Motion）
    </motion.div>
  );
}

监听滚动事件实现视差滑动

结合 window.scrollY 或 Intersection Observer API，根据滚动位置动态调整元素位置。

function ParallaxSlide() {
  const [offsetY, setOffsetY] = useState(0);
  useEffect(() => {
    const handleScroll = () => setOffsetY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div style={{ transform: `translateX(${offsetY * 0.5}px)` }}>
      滚动时滑动
    </div>
  );
}

使用 Swiper.js 实现轮播滑动

适用于图片轮播或列表横向滑动场景。

npm install swiper

示例代码：

react中如何让元素滑动

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

function Carousel() {
  return (
    <Swiper spaceBetween={50} slidesPerView={3}>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}