React实现输入框激活时占位符移至左上角小标签的方法

方案一：CSS动画结合React状态控制 #

这是最基础的实现方式，通过React状态切换DOM元素的类名，触发预定义的CSS动画。

比如实现一个元素的淡入淡出效果：

首先定义CSS动画：

.fade-in {
  animation: fadeIn 0.5s ease-in forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

然后在React组件中通过状态控制类名：

import { useState } from 'react';

function AnimatedComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        切换显示状态
      </button>
      <div className={isVisible ? 'fade-in' : 'fade-out'}>
        我是带动画的元素
      </div>
    </div>
  );
}

export default AnimatedComponent;

方案二：使用React Transition Group #

这是React官方维护的过渡动画库，专门处理组件的进入、退出和状态切换动画。

首先安装依赖：

npm install react-transition-group

然后实现一个简单的进入/退出动画：

import { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

function TransitionComponent() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        触发动画
      </button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="slide"
        unmountOnExit
      >
        <div className="box">滑动出现的元素</div>
      </CSSTransition>
    </div>
  );
}

export default TransitionComponent;

对应的CSS样式：

.box {
  width: 200px;
  height: 200px;
  background: #42b983;
}

.slide-enter {
  transform: translateX(-100%);
}

.slide-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-in;
}

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

.slide-exit-active {
  transform: translateX(-100%);
  transition: transform 300ms ease-in;
}

方案三：使用Framer Motion #

这是一款易用性很高的React动画库，支持复杂的动画效果，语法简洁直观。

先安装依赖：

npm install framer-motion

实现一个缩放+淡入的动画：

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

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

  return (
    <div>
      <button onClick={() => setIsActive(!isActive)}>
        触发动画
      </button>
      <motion.div
        initial={{ opacity: 0, scale: 0.5 }}
        animate={{ 
          opacity: isActive ? 1 : 0, 
          scale: isActive ? 1 : 0.5 
        }}
        transition={{ duration: 0.3 }}
        style={{ width: 200, height: 200, background: '#ff4081' }}
      >
        Framer Motion 动画元素
      </motion.div>
    </div>
  );
}

export default FramerMotionComponent;

如果你的动画需求更复杂（比如路径动画、手势触发动画），Framer Motion会更适合。

内容的提问来源于stack exchange，提问作者Nicke7117