CSS 关键帧在开发环境中运行良好但在生产环境中运行不正常

Question

我正在开发一个使用 node-sass 编译 SCSS 的应用程序。我的组件结构是这样的：

./src
|-- components
|   |-- Foo
|   |   |-- Foo.jsx
|   |   `-- Foo.scss
|   |-- Bar
|       |-- Bar.jsx
|       `-- Bar.scss
[...]

然后我这样调用我的 scss:

import React, {useState} from 'react';
import './Foo.scss';
[...]

当我运行进行开发构建时，我的所有转换都正常，但是当我运行构建和部署时，它们都丢失了。所有其他 CSS 样式都可以正常工作，只是我的转换搞砸了。它们仍然存在，但它们都发生在最后一帧。所以如果一个过渡应该在 200 毫秒内从 0 到 100，它仍然会发生，但它在最后一个可能的帧中从 0 到 100。

谁能指出我正确的方向？这是我的 package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-map-gl": "^5.2.7",
    "react-map-gl-geocoder": "^2.0.12",
    "react-redux": "^7.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

编辑：根据要求，这是我的转换示例：


.fade-in {
    animation: fade-in ease-in 0.25s,
    slide-in ease-in 0.25s;
}

@keyframes fade-in {
    0% {
        opacity: 0%;
    }
    
    100% {
        opacity: 100%;
    }
}

@keyframes slide-in {
    0%{
        transform: translateY(50px);
    }
    100%{
        transform: translateY(0px);
    }
}

然后我根据状态有条件地添加类。

Answer 1

简短回答：.scss 不支持 % 符号（根据 w3 文档，它也不是官方符号：https://www.w3.org/TR/css-color-3/#opacity）一些浏览器也不支持 % 符号。将不透明度值从 % 表示法更改为介于 0 和 1 之间的数字表示法。

长答案：我有一个类似的问题。在 create-react-app 环境中，当我在 cli 上使用 npm start 运行时，以下动画正确，但当我运行 npm 运行构建和服务时，它不起作用 -构建。我的不透明度为 0 的元素会在最后一帧突然达到其最终不透明度（就像你的一样。）这是我原来的自定义 .css 文件：

/*keyframes.css*/
@keyframes slideInRightDark {
  0% {
    opacity: 0%;
    transform: translate(100%);
  }
  100% {
    opacity: 40%;
    transform: translate(0%);
  }

以及反应组件文件：

/*Text.js*/
import "[...some_file_path]/keyframes.css"
...
return (<div style={{animationName: slideInRightDark, animationDuration... etc.}}></div>)

我通过查看 animate.css 库 (https://animate.style/) 并观察 animate.css 关键帧是如何构建的来让它工作的。顺便说一句，很棒的即时可用关键帧库。强烈推荐用于快速启动您的 Web 应用程序。不管怎样，这里来自 animate.css 文件：

/* CSS keyframes from animate.css */
@charset "UTF-8";
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
...
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

在换入和换出 utf-charset 和 :root 部分以及添加我自己的 @-webkit-keyframes 之后，我发现实际上是百分比符号的不透明度使它在它之后突然闪烁动画持续时间：

/*in keyframes.css*/
...
@keyframes slideInRightDark {
  from {
    opacity: 0;
    transform: translate(100%, 0);
  }
  to {
    opacity: 0.4;
    transform: translate(0, 0);
  }
}

希望对你有所帮助

CSS 关键帧在开发环境中运行良好但在生产环境中运行不正常

CSS keyframes working fine in dev environment but not on production build

javascript

sass

reactjs

webpack

create-react-app