为什么在使用 styled-jsx 时不应用此关键帧动画？

Question

我尝试在没有任何条件的情况下在单独的行中添加 animation，但是没有应用转换。我还尝试用反引号代替 animation 属性的双引号，但没有成功。如何在单击时应用动画 false 并在单击时播放半径的过渡 true?

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" />
        </svg>
      </main>

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

        circle {
          r: ${clicked ? "10%" : "5%"};
          animation: ${clicked ? "none" : "bounce 2s infinite"};
          transition: r 0.8s ease-in-out;
        }

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

Answer 1

这与 styled-jsx 如何应用它们的 css 规则有关。
每个 <style jsx> 标签将被 babel 转换成一段 js 代码，该代码将生成并跟踪 html.

中的实际 <style type="txt/css"/> 标签。

该标签将包含一个唯一 ID，如果您检查该标签，它将如下所示：

<style type="text/css" data-styled-jsx="">
      svg.jsx-1097321267 {
        width: 100%;
        height: 100%;
      }
      circle.jsx-1097321267 {
        r: 5%;
        -webkit-animation: bounce 2s infinite;
        animation: bounce 2s infinite;
        -webkit-transition: r 0.8s ease-in-out;
        transition: r 0.8s ease-in-out;
      }
      @-webkit-keyframes bounce-jsx-1097321267 {
        0% {
          r: 5%;
        }
        50% {
          r: 6%;
        }
        100% {
          r: 5%;
        }
      }
      @keyframes bounce-jsx-1097321267 {
        0% {
          r: 5%;
        }
        50% {
          r: 6%;
        }
        100% {
          r: 5%;
        }
      }
    </style>

注意动画是如何使用相同的 ID 生成的。 bounce-jsx-1097321267.
styles-jsx 标签中的任何静态 references/classes 也会获得此 ID。这都是在编译时通过 babel 完成的。 生成的 js 代码将为您完成所有引用。

动态分配 css 代码时出现问题。 ${clicked ? "none" : "bounce 2s infinite"}; 规则似乎无法将生成的 id 添加到 bounce 动画名称。这可能是设计使然，也可能是错误，或者仅仅是 styled-jsx 中的限制。 IDK.

您有几个选项可以解决这个问题，可能最简单的方法是使 css 样式静态化，并在应应用新样式时添加 class。

IE

 circle {
          r: 5%;
          animation: bounce 2s infinite;
          transition: r 0.8s ease-in-out;
        }

        .is-clicked {
          animation: none;
          r: 10%;
        }

并应用 class 来圈出像 className={clicked && "is-clicked"} ，这样动画名称将包含一个 id，并且使用该动画的任何规则也将收到相同的 id。

code sandbox for reference

为什么在使用 styled-jsx 时不应用此关键帧动画？

Why is this keyframe animation not applied when using styled-jsx?

javascript

css-animations

reactjs

next.js

styled-jsx