如何在Framer Motion中为::before和::after伪元素添加动画

伪元素不属于真实DOM节点，无法被React或动画库直接操作，得通过父元素间接控制，以下是两种实用方案：

方案1：CSS类配合React状态切换 #

先在CSS里定义伪元素的基础样式和动画过渡，再通过React切换父元素的类名触发动画：

/* 全局CSS或组件内联CSS */
.animated-btn::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: #333;
  transition: transform 0.3s ease-in-out; /* 定义过渡动画 */
}

.animated-btn.active::before {
  transform: rotate(90deg);
}

// React组件
import { useState } from 'react';

export default function AnimatedButton() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      className={`animated-btn ${isActive ? 'active' : ''}`}
      onClick={() => setIsActive(!isActive)}
    >
      点击切换伪元素动画
    </button>
  );
}

方案2：CSS变量配合framer-motion（适配你的写法） #

如果想用你尝试的framer-motion variants方式，可以通过父元素传递CSS变量，让伪元素读取变量值实现动画：

import { motion } from 'framer-motion';

const buttonVariants = {
  visible: {
    '--rotate-deg': '90deg',
    transition: { duration: 0.3 }
  },
  hidden: {
    '--rotate-deg': '0deg',
    transition: { duration: 0.3 }
  },
};

export default function AnimatedButton() {
  return (
    <motion.button
      variants={buttonVariants}
      initial="hidden"
      animate="visible"
      whileTap="hidden"
      style={{ 
        '--rotate-deg': '0deg',
        position: 'relative',
        paddingLeft: '40px'
      }}
    >
      带伪元素动画的按钮
      <style jsx>{`
        button::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 10px;
          width: 18px;
          height: 18px;
          background-color: #2196F3;
          transform: rotate(var(--rotate-deg));
          transition: transform 0.3s ease;
        }
      `}</style>
    </motion.button>
  );
}

原写法不生效的原因 #

framer-motion无法直接识别并处理伪元素的样式，伪元素不在React渲染的DOM树中，动画库无法直接修改它们的属性，必须通过父元素的状态、类名或CSS变量间接控制。

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