构建并部署到 Firebase 后动画停止工作

Question

我有一个问题，当我 npm run-script build 和 firebase deploy 我的 React 应用程序到 Firebase 托管时，我的动画停止工作。

不知道为什么会这样，我添加了每个网络浏览器兼容的关键帧。

这是我的应用程序在本地主机 (npm start) 上运行时的样子：

然后是从 firebase 托管的情况：

好像无法读取我的关键帧动画。

这是index.js：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose, combineReducers } from "redux";
import thunk from "redux-thunk";
import * as serviceWorker from "./serviceWorker";
import userReducer from "./store/reducers/user";

import { WithClass } from "./hoc/WithClass";
import classes from "./index.module.css";
import App from "./App";

// Icons made by Freepik from www.flaticon.com

// Reducers
const rootReducer = combineReducers({
  user: userReducer,
});

// Store
const store = createStore(rootReducer, applyMiddleware(thunk));

const app = (
  <Provider store={store}>
    <WithClass>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </WithClass>
  </Provider>
);

ReactDOM.render(app, document.getElementById("root"));

App.js:

import React from "react";
import { Route, Switch, withRouter, Redirect } from "react-router-dom";

import HomePage from "./pages/HomePage/HomePage";
import AboutPage from "./pages/AboutPage/AboutPage";
import WorkPage from "./pages/WorkPage/WorkPage";
import PhotographyPage from "./pages/PhotographyPage/PhotographyPage";
import ContactPage from "./pages/ContactPage/ContactPage";
import { WithClass } from "./hoc/WithClass";

/**
 * Contains switch routing to components
 *
 * Called by index.js in ReactDOM.render()
 */
const App = () => {
  return (
    <WithClass>
      <Switch>
        <Route path="/about" exact component={AboutPage} />
        <Route path="/work" exact component={WorkPage} />
        <Route path="/photography" exact component={PhotographyPage} />
        <Route path="/contact" exact component={ContactPage} />
        <Route path="/" exact component={HomePage} />
        <Redirect to="/" />
        {/* Redirect anything other than routes specified to "/" */}
      </Switch>
    </WithClass>
  );
};

export default withRouter(App);

HomePage.js:

import React, { useEffect } from "react";
import AnimatedSlideShowText from "../../components/UI/AnimatedSlideShowText/AnimatedSlideShowText";
import HeaderAnimated from "../../components/UI/HeaderAnimated/HeaderAnimated";
import HeaderStatic from "../../components/UI/HeaderStatic/HeaderStatic";
import SocialMediaFooter from "../../components/UI/SocialMediaFooter/SocialMediaFooter";
import { useDispatch, useSelector } from "react-redux";
import { loadedOnce } from "../../store/actions/user";

import classes from "./HomePage.module.css";

const HomePage = () => {
  const dispatch = useDispatch();
  const didLoadOnce = useSelector((state) => state.user.loadedOnce);

  useEffect(() => {
    setTimeout(() => {
      dispatch(loadedOnce());
    }, 2000);
  }, []);

  return (
    <div className={classes.MainContainer}>
      <div className={classes.HeaderContainer}>
        {didLoadOnce ? <HeaderStatic /> : <HeaderAnimated />}
      </div>
      <div className={classes.BodyContainer}>
        <div className={classes.NameContainer}>
          <AnimatedSlideShowText tag="h1">
            Christian Nicoletti
          </AnimatedSlideShowText>
          <AnimatedSlideShowText
            tag="h2"
            mainTextStyle={classes.Title}
          >
            Software Engineer
          </AnimatedSlideShowText>
          <AnimatedSlideShowText
            tag="h3"
            mainTextStyle={classes.School}
          >
            University of California, Santa Cruz graduate
          </AnimatedSlideShowText>
        </div>
        <div className={classes.FooterContainer}>
          <SocialMediaFooter />
        </div>
      </div>
    </div>
  );
};

export default HomePage;

HomePage.module.css:

.MainContainer {
  width: 100vw;
  height: 100vh;
  min-width: 1500px;
}

.BodyContainer {
  display: flex;
  height: 100%;
  justify-content: center;
  margin-left: 20%;
  flex-direction: column;
}

.NameContainer {
  display: flex;
  height: 250px;
  width: 500px;
}

.Title {
  margin-top: 60px;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.School {
  margin-top: 120px;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.HeaderContainer {
  position: absolute;
  right: 100px;
}

.FooterContainer {
  width: 500px;
}

AnimatedSlideShowText.js:

import React from "react";
import classes from "./AnimatedSlideShowText.module.css";

const AnimatedSlideShowText = (props) => {
  const CustomTag = `${props.tag}`;
  return (
    <CustomTag className={`${classes.MainText} ${props.mainTextStyle}`}>
      {props.children}
    </CustomTag>
  );
};

export default AnimatedSlideShowText;

AnimatedSlideShowText.module.css:

.MainText {
  color: white;
  position: absolute;
  opacity: 0;
  margin-left: -10%;
  font-family: Calibri;
  font-weight: 300;
  -webkit-animation: slide 0.5s forwards;
  animation: slide 0.5s forwards;
}

@-o-keyframes slide {
  100% {
    margin-left: 0%;
    opacity: 100%;
  }
}

@-ms-keyframes slide {
  100% {
    margin-left: 0%;
    opacity: 100%;
  }
}

@-moz-keyframes slide {
  100% {
    margin-left: 0%;
    opacity: 100%;
  }
}

@-webkit-keyframes slide {
  100% {
    margin-left: 0%;
    opacity: 100%;
  }
}

@keyframes slide {
  100% {
    margin-left: 0%;
    opacity: 100%;
  }
}

@-webkit-keyframes show {
  /* Chrome, Safari */
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@-moz-keyframes show {
  /* FF */
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@-ms-keyframes show {
  /* IE10 */
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@-o-keyframes show {
  /* Opera */
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
@keyframes show {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

我会添加更多组件源代码，但我认为 AnimatedSlideShowText 是理解问题所需的全部内容。

所以，我只是想让我的动画在构建和部署时正常工作。我不确定为什么它们在构建和部署时会停止工作。

有没有可能在built/deployed时使用module.css对动画有影响？任何帮助将不胜感激，如果您需要更多源代码，请告诉我。

Answer 1

我以前遇到过类似的问题，但我使用的是 CSS 框架。问题出在我的托管服务提供商的构建缓存上。当使用 create-react-app（使用 Webpack）时，在构建阶段会发生所谓的 'tree-shake'。它从您的模块中删除未使用的样式，类等。

在本地工作的模块可能无法在生产中工作，因为它在您的第一个构建中被删除，然后由于构建缓存而没有在新构建中使用。

我不知道它是否能解决您的问题，但我建议您检查一下，因为它过去对我有用。

Answer 2

好的！我设法修好了。我认为这比实际情况要复杂得多。

简短回答：我不得不将我所有的 opacity: 100% 更改为 opacity: 1，突然间一切都出现了并且工作正常。

详细回答：我不得不在控制台中稍作尝试，然后意识到我所有的组件和文本都在那里，只是没有显示出来。我通过禁用和重新启用来播放动画，东西会闪烁一秒钟。我意识到它将不透明度渲染为：opacity: 1% 而不是 opacity: 100%。 显然，当使用 npm run-script build 构建时，它就像 100% 有尾随零（？？）。

无论如何，我感谢您的帮助，现在一切正常。

构建并部署到 Firebase 后动画停止工作

Animations stop working after building and deploying to Firebase

javascript

css

npm

web-deployment

firebase-hosting