react实现翻转效果

使用 CSS 和 React 实现翻转效果

翻转效果可以通过 CSS 的 transform 属性和 React 的状态管理实现。以下是一个简单的实现方法：

创建翻转组件

import React, { useState } from 'react';
import './FlipCard.css';

const FlipCard = () => {
  const [isFlipped, setIsFlipped] = useState(false);

  return (
    <div className="flip-card" onClick={() => setIsFlipped(!isFlipped)}>
      <div className={`flip-card-inner ${isFlipped ? 'flipped' : ''}`}>
        <div className="flip-card-front">
          Front Content
        </div>
        <div className="flip-card-back">
          Back Content
        </div>
      </div>
    </div>
  );
};

export default FlipCard;

添加 CSS 样式

.flip-card {
  perspective: 1000px;
  width: 200px;
  height: 200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-inner.flipped {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

使用 React Spring 实现动画翻转

对于更复杂的动画效果，可以使用 react-spring 库：

安装依赖

npm install react-spring

实现组件

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

const FlipCard = () => {
  const [flipped, setFlipped] = useState(false);

  const { transform, opacity } = useSpring({
    opacity: flipped ? 1 : 0,
    transform: `perspective(600px) rotateY(${flipped ? 180 : 0}deg)`,
    config: { mass: 5, tension: 500, friction: 80 }
  });

  return (
    <div onClick={() => setFlipped(state => !state)}>
      <animated.div
        style={{
          opacity: opacity.interpolate(o => 1 - o),
          transform
        }}
      >
        Front Content
      </animated.div>
      <animated.div
        style={{
          opacity,
          transform: transform.interpolate(t => `${t} rotateY(180deg)`)
        }}
      >
        Back Content
      </animated.div>
    </div>
  );
};

使用 Framer Motion 实现翻转

framer-motion 提供了更简单的 API 来实现翻转效果：

安装依赖

npm install framer-motion

实现组件

import React, { useState } from 'react';
import { motion } from 'framer-motion';

const FlipCard = () => {
  const [isFlipped, setIsFlipped] = useState(false);

  return (
    <motion.div
      style={{
        width: 200,
        height: 200,
        perspective: 1000
      }}
      onClick={() => setIsFlipped(!isFlipped)}
    >
      <motion.div
        animate={{ rotateY: isFlipped ? 180 : 0 }}
        transition={{ duration: 0.6 }}
        style={{
          width: '100%',
          height: '100%',
          position: 'relative',
          transformStyle: 'preserve-3d'
        }}
      >
        <div style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backfaceVisibility: 'hidden'
        }}>
          Front Content
        </div>
        <div style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backfaceVisibility: 'hidden',
          rotateY: 180
        }}>
          Back Content
        </div>
      </motion.div>
    </motion.div>
  );
};

以上方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择合适的方案。CSS 方案适合简单需求，而 react-spring 和 framer-motion 适合需要更精细控制动画的场景。