0

我尝试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>
    </>
  );
}
4

1 回答 1

1

这与 styled-jsx 如何应用他们的 css 规则有关。
每个<style jsx>标签都将被 babel 转换成一段 js 代码，该代码将生成并跟踪<style type="txt/css"/>html 中的实际标签。

该标签将包含一个唯一 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 标记中的任何静态引用/类也会获得此 ID。这一切都是在编译时通过 babel 完成的。 生成的 js 代码将为您完成所有引用。

动态分配 css 代码时会出现问题。看来，该${clicked ? "none" : "bounce 2s infinite"};规则未能将生成的 id 添加到bounce动画名称。这可能是设计使然，也可能是错误，或者只是 styled-jsx 的限制。身份证。

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

IE

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

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

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

代码沙箱供参考

于 2021-09-14T21:45:09.497 回答