为什么styled-jsx中关键帧动画不生效？如何同时实现点击切换的动画和过渡？

架构老林

2026-10-5

问题根因

你当前的写法存在两个导致过渡失效的问题：

直接在CSS模板字符串中注入clicked变量，状态切换时整个circle的样式规则会被重新生成，浏览器无法识别前后两个状态的r值差异，无法触发过渡。
animation和transition同时作用于r属性时animation优先级更高，状态切换瞬间animation被设为none，会直接重置r的属性值，没有给过渡留计算空间。

修复方案

通过属性选择器绑定状态，预定义所有样式规则即可解决：

import { useState } from "react";

export default function Home() {
  const [clicked, setClicked] = useState(false);

  return (
    <>
      <main>
        <svg onClick={() => setClicked((c) => !c)}>
            <circle 
              cx="50%" 
              cy="40%" 
              stroke="black" 
              strokeWidth={2} 
              fill="gray"
              data-clicked={clicked}
            />
        </svg>
      </main>

      <style jsx>{`
        svg {
          width: 100%;
          height: 100%;
        }

        circle {
          r: 5%;
          transition: r 0.8s ease-in-out;
        }

        circle[data-clicked="false"] {
          animation: bounce 2s infinite;
        }

        circle[data-clicked="true"] {
          r: 10%;
          animation: none;
        }

        @keyframes bounce {
          0% {
            r: 5%;
          }
          50% {
            r: 6%;
          }
          100% {
            r: 5%;
          }
        }
      `}</style>
    </>
  );
}