>source

SCSS를 컴파일하기 위해 node-sass를 사용하는 앱을 개발 중입니다. 내 구성 요소 구조는 다음과 같습니다.

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

그렇다면 내 scss를 다음과 같이 호출합니다.

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

개발 빌드를 실행할 때는 모든 전환이 정상이지만 빌드 및 배포를 실행하면 전환이 손실됩니다. 다른 모든 CSS 스타일은 잘 작동하지만 내 전환이 엉망입니다. 그것들은 여전히 ​​존재하지만 모두 마지막 프레임에서 발생합니다. 따라서 전환이 200ms 동안 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);
    }
}

그런 다음 상태에 따라 조건부로 클래스를 추가합니다.

전환을 보여주시겠습니까?

Simplicius2021-10-09 10:43:23

감사합니다. 방금 게시물을 수정하고 전환 중 하나를 추가했습니다.

JohnFajardo2021-10-09 10:43:23

easy-in이 최종 CSS로 올바르게 변환됩니까? 두 가지 용이성을 명시적 형식인 큐빅 베지어(0.42, 0.0, 1.0, 1.0)로 바꾸면 어떻게 되나요?

krubo2021-10-09 10:43:23

또한 animation-timing-function: easy-in을 추가하면 어떻게 됩니까? 각 0%{} 키프레임 안에?

krubo2021-10-09 10:43:23

@JohnFajardo 해결할 수 있었습니까? 나는 같은 문제에 직면하고 있습니다. 프로덕션 빌드가 아닌 dev 빌드에서 작업합니다.

Lukas Nespor2021-10-09 15:16:59
  • 답변 # 1

    단답형: .scss는 % 표기법을 지원하지 않습니다(w3 문서에 따른 공식 표기법도 아닙니다. https://www.w3.org/TR/css-color-3/#불투명도) 일부 브라우저는 % 표기법도 지원하지 않습니다. 불투명도 값을 % 표기법에서 0과 1 사이의 숫자 표기법으로 변경합니다.

    긴 답변: 비슷한 문제가있었습니다. create-react-app 환경에서 cli에서 npm start로 실행할 때 다음 애니메이션이 올바르게 애니메이션되었지만 npm run build 및 serve -s build를 실행할 때는 작동하지 않았습니다. 내 불투명도 0 요소는 마지막 프레임에서 갑자기 끝 불투명도에 도달합니다.

    /*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 키프레임이 어떻게 만들어졌는지 관찰합니다. BTW, 즉시 사용 가능한 키프레임을 위한 훌륭한 라이브러리입니다. 웹 앱을 빠르게 시작하는 데 적극 권장됩니다. 어쨌든, 다음은 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 최적화
  • 다음 android : Google 지도 지도가 사라지고 GPS 문제가 발생하면 위도가 길어지고 로고와 위치 버튼이 표시될 수 있습니다.