CSS Переходная группа не работает после сборки - PullRequest
Новая
       29

CSS Переходная группа не работает после сборки

0 голосов
/ 29 февраля 2020

В настоящее время я развертываю свое приложение реакции на Firebase. Однако моя группа CSSTransition не работает после создания развертывания. Странно то, что он отлично работает на локальном хосте. Но после его сборки и развертывания в firebase он не может загрузить ни один из переходов (хотя страница прекрасно работает).

Кто-нибудь знает, как я могу это исправить, пожалуйста? Очень ценится заранее.

Вот образец 

import React, { useState, useContext, Component } from "react";
import CSSTransitionGroup from "react-transition-group/CSSTransitionGroup";
import firebase from "firebase/app";
import "firebase/database";
import "../css/AboutPage.css";

class AboutPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { totalDonations: 0 };
  }
  componentDidMount() {
    console.log("ABOUT PAGE");
    let earnings = 0;

    firebase
      .database()
      .ref(`earnings`)
      .on("child_added", snapshot => {
        console.log(snapshot.val());

        if (!Array.isArray(snapshot.val())) {
          earnings += parseInt(snapshot.val().donation);
        } else {
          console.log(snapshot.val());

          snapshot.val().forEach((earning, index, arr) => {
            earnings += parseInt(earning.donation);
          });
        }
        this.setState({ totalDonations: earnings });
      });
  }
  render() {
    return (
      <div>
        <CSSTransitionGroup
          transitionName="example"
          transitionLeaveTimeout={500}
          transitionAppear={true}
          transitionAppearTimeout={500}>
          <div className="aboutPage_container">
            <h1>Give with a H-Art</h1>
            <p>
              Welcome to SupurrCats! We're a group of illustrators who are
              trying to do a little good with our passion in art.
            </p>
            <p>
              We paint, illustrate, and sometimes even animate! So let us know
              if you'd like to comission an artwork. Part of the proceeds will
              be donated to charity. For 2020, we have a goal of raising
              <strong style={{ color: "var(--rose)" }}> $2020</strong>.
            </p>
            <p>
              We've got a long way to go, but with the help of our wonderful
              supporters, we've raised
              <strong style={{ color: "var(--rose)" }}>
                {" $" + this.state.totalDonations}
              </strong>
              !
            </p>
            <div className="contribution_bar_container">
              <div className="contribution_bar_outer">
                <CSSTransitionGroup
                  transitionName="right_expand"
                  transitionLeaveTimeout={500}
                  transitionAppear={true}
                  transitionAppearTimeout={500}>
                  <div
                    className="contribution_bar_inner2"
                    style={{
                      width: `${(this.state.totalDonations * 100) / 2020}%`
                    }}></div>
                </CSSTransitionGroup>
              </div>
            </div>
          </div>
        </CSSTransitionGroup>
      </div>
    );
  }
}

export default AboutPage;
...