React App localhost:3000 徽标不旋转

Question

我第一次发帖。就这样吧。

我已经安装了 Visual Studio Code，并想创建我的第一个 React 应用程序。我通读了文档，使用了语法：

npx create-react-app my-react-app

还使用了 npm start

我编译成功了！终端中的消息。http:localhost3000 页面在新选项卡中打开。显示 React 徽标。无论出于何种原因，React 徽标对我来说都是静态图像。我编辑了页面 P 标签中的文本，它们会实时更新。Live Server 扩展似乎也可以工作。

几乎每个视频教程都有这个标志旋转。我担心的是 React 甚至 Visual Studio Code 从一开始就没有正确设置。我现在已经尝试卸载并重新安装 3 次了。我得到相同的静态图像。

有什么想法、经历，甚至阴谋论吗？React 标志适合你吗？或者像我一样静态？有什么方法可以让它在每次创建新的 React 应用程序时旋转？每当我的代码无法工作（最有可能对我的代码进行操作）时，我都会不断地思考 React 徽标。

节点版本 14.16.0 npm 6.14.11

Answer 1

我也得到了相同的静态 React 徽标，这是我修复它的方法（在 Windows VM 上）

症状：

当您尝试https://reactjs.org/docs/create-a-new-react-app.html上的教程时，Windows 的动画效果设置可能会阻止 React Logo 旋转，

尝试（1）或（2）

(1) 【如何修复并让React标志旋转——通过更改Windows系统设置）

转到 Window 的高级设置系统设置 -> 性能选项，选中“在窗口内对控件和元素进行动画处理”（选中此设置并应用后，您可以看到 React 徽标开始旋转。）

(2) [删除代码中受上述设置影响的部分]（从css代码内部修复）

从 src/App.css 中删除第 10 行“ (prefers-reduced-motion: no-preference) ”

有关更多详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

看起来无论您的系统上有什么动画设置，方法 2 总是有效。但作为教程，您可能希望避免从一开始就对原始源代码进行更改。

Answer 2

遇到了同样的问题，这有效：

在 App.css 中，第 10 行，删除包含“ (prefers-reduced-motion: no-preference) ”的行及其下方 3 行的右括号。

Answer 3

因此，正如我在评论中所说，无需担心动画徽标。只是一个 SVG 文件。

您也可以创建自己的检查这里

另外，我生成了一个新项目，并且我的徽标旋转。

首先，检查您是否有 logo.svg 文件，然后检查您的 App.css 文件。

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

另外，您需要将它们导入到您的 App.js 中，包括 .css 和 .svg