React中Framer Motion结合SplitText仅透明度动画生效问题求助

问题根源很明确：<span>是行内元素，CSS的transform属性对行内元素不生效——浏览器虽然能检测到属性值变化，但视觉上不会呈现位移、缩放这类变换效果，只有透明度这种对行内元素有效的属性能正常工作。

修复方案 #

给motion.span添加inline-block显示属性，既保留文本的行内布局特性，又能支持transform变换。直接用Tailwind的inline-block类即可：

import { SplitText } from "@cyriacbr/react-split-text";
import React from "react";
import { motion } from "framer-motion";

function Mywork() {
  return (
    <div className="flex justify-center items-center relative min-w-full min-h-full">
      <motion.div
        transition={{ staggerChildren: 0.1 }}
        className="text-white text-4xl"
      >
        <SplitText
          LetterWrapper={({ wordIndex, countIndex, children }) => (
            <motion.span
              // 新增inline-block类，启用transform支持
              className={`wrapper opacity-60 cursor-pointer inline-block`}
              initial={{ y: -100, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{
                type: "spring",
                stiffness: 100,
                // 建议把duration从10调整为0.5左右，原数值会让动画极慢
                duration: 0.5,
                delay: countIndex * 0.1,
              }}
              whileHover={{ scale: 0.8, duration: 1 }}
            >
              {children}
            </motion.span>
          )}
        >
          This is a test
        </SplitText>
      </motion.div>
    </div>
  );
}

export default Mywork;

额外提示 #

• 行内元素（如默认状态的span、a）不支持transform、width/height等属性，改成inline-block或block才能启用这些特性
• 原代码中duration:10会让动画持续10秒，速度过慢，建议根据需求调整为0.3-1秒区间的数值

内容的提问来源于stack exchange，提问作者Theo de Wit