React App localhost:3000 徽标不旋转答案

【问题标题】：React App localhost:3000 logo not spinningReact App localhost:3000 徽标不旋转
【发布时间】：2021-03-26 08:15:08
【问题描述】：

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

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

npx create-react-app my-react-app

也使用了 npm start

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

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

有什么想法、经历，甚至是阴谋论吗？ React 徽标是否适合您？还是像我一样的静态？每次我创建一个新的 React 应用程序时，有什么方法可以让它旋转吗？每次我的代码不工作（最有可能对我的代码做）时，我都会不断思考 React Logo。

节点版本 14.16.0 npm 6.14.11

【问题讨论】：

我刚刚试了一下：npx create-react-app test 然后 cd test，yarn start。徽标为我旋转。 CSS 中的这一行是导致微调器的原因： media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } @keyframes App-logo-spin { from { transform: rotate(0deg); } 到 { 变换：旋转（360 度）； } } 你的 CSS 中有这个吗？
你好@Kevin，你为什么这么关心动画标志？这只是一个动画文件：/ 添加为here
@DannyHobo 正确我默认情况下在 App.css 中有该代码。感谢您指出哪个代码负责该操作。
@Aristotle 我关心的是一致性和节省时间。我只是想确保我的设置与我看到的其他设置平行。即使预期的结果不是，它似乎也是如此。精神上我只想专注于代码。谢谢。

标签： reactjs visual-studio-code

【解决方案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)”

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

【讨论】：

我在 Windows 中通过运行对话框运行命令 sysdm.cpl 以进入性能选项。我注意到我的 Windows 内的 Animate 控件和元素已被选中。我已经多次运行 npx create-react-app 'my-react-app' 并且每次我的 React 徽标都不会旋转 :)。哦，至少到目前为止对实际应用程序开发没有负面影响。您的选项 2 可能是要走的路？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

您也可以创建自己的Check here

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

首先，检查是否有 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

【讨论】：

谢谢亚里士多德。我尝试了您的链接代码，这很有帮助。还要感谢您展示了将所述徽标和 .css 导入 App.js 的重要性，这是我正在努力争取的良好基础。
@KevinOrara 很高兴听到。永远记住当你创建一个.js 文件和一个.css 文件来导入它，否则样式将不会被应用。如果您想了解更多信息，并从某个地方开始，请查看React docs

【解决方案4】：

create-react-app (CRA) 的 logo 旋转版本似乎已经很老了，CRA 包正在迅速变化，所以你会预料到会有一些不同。

您的应用已启动足够好，这就是您需要关心的全部内容。

【讨论】：

【解决方案5】：

从第 10 行只删除部分“: no-preference”。它应该是“@media (prefers-reduced-motion)”，然后徽标在旋转（至少是我的）。

【讨论】：

【解决方案6】：

我在 Windows 10 上遇到了同样的问题。找到此链接：https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

并使用这条线让它工作：在 Windows 10 中：设置 > 轻松使用 > 显示 > 在 Windows 中显示动画

【讨论】：