来自react-transition-group的CSSTransition不应用类

问题描述

我正在尝试将CS​​STransition集成到我的Gatsby网站，但未应用任何类。我正在使用CSS模块，并且有一个dataset = Dataset.Tabular.from_delimited_files(path = [(datastore,file_path)],header = False) #sdf: spark.DataFrame = dataset.to_spark_dataframe() sdf: pd.DataFrame = dataset.to_pandas_dataframe() print(sdf.head(3)) 用作淡入和淡出的父级，本质上将淡入淡出效果应用于此效果并在内容更改时覆盖其内容。它有<div>类。这是我的fadEffect组件和SASS。

AppLayout.tsx

app-layout

AppLayout.scss

import React,{ ReactNode,useState } from 'react';

import { ApiContext } from 'contexts/ApiContext';
import { graphql,StaticQuery } from 'gatsby';
import { TransitionGroup,CSSTransition } from 'react-transition-group';

import { Devtools } from '../devtools/Devtools';
import { Footer } from '../footer/Footer';
import { Header } from '../header/Header';
import s from './AppLayout.scss';

interface AppLayoutProps {
  children: ReactNode;
  location: string;
}

const isDev = process.env.NODE_ENV === 'development';

// tslint:disable no-default-export
export default ({ children,location }: AppLayoutProps) => {
  const [fadeEffectVisible,setFadeEffectVisible] = useState(false);

  const handleFadeEffectEntered = () => {
    setTimeout(() => {
      setFadeEffectVisible(false);
    },50);
  };

  return (
    <StaticQuery
      query={`${NavQuery}`}
      render={(data) => (
        <>
          <ApiContext>
            <Header navigationContent={data.prismic.allNavigations.edges[0].node} />

            <CSSTransition
              in={fadeEffectVisible}
              timeout={150}
              classNames={{
                enter: s.fadeEffectEnter,enterActive: s.fadeEffectEnterActive,enterDone: s.fadeEffectEnterDone,exit: s.fadeEffectExit,exitActive: s.fadeEffectExitActive,}}
              onEntered={handleFadeEffectEntered}
            >
              <div className={s.fadeEffect} aria-hidden="true" />
            </CSSTransition>

            <TransitionGroup component={null}>
              <CSSTransition
                key={location}
                timeout={150}
                classNames={{
                  enter: s.pageEnter,}}
              >
                <div className={s.layout}>
                  {children}

                  <Footer navigationItems={data.prismic.allNavigations.edges[0].node} />

                  {isDev && <Devtools />}
                </div>
              </CSSTransition>
            </TransitionGroup>
          </ApiContext>
        </>
      )}
    />
  );
};

const NavQuery = graphql`
  query NavQuery {
    prismic {
      allNavigations {
        edges {
          node {
            ...NotificationBar
            ...NavigationItems
            ...FooterNavigationItems
          }
        }
      }
    }
  }
`;

如果这还不够，我很乐意提供更多详细信息/代码。我是React和Gatsby的新手，所以我仍然在学习术语。预先感谢。

解决方法

在第一个fadeEffectVisible上您将CSSTransition更新为true的过程中看不到您的代码的一部分，在第二个{{1} }，我敢打赌这是您的问题。请查看React Transition Group中的此示例，以了解属性的用法。

App.js

in

Style.css

CSSTransition

将function App() { const [inProp,setInProp] = useState(false); return ( <div> <CSSTransition in={inProp} timeout={200} classNames="my-node"> <div> {"I'll receive my-node-* classes"} </div> </CSSTransition> <button type="button" onClick={() => setInProp(true)}> Click to Enter </button> </div> ); } 属性设置为true时，子组件将首先接收类.my-node-enter { opacity: 0; } .my-node-enter-active { opacity: 1; transition: opacity 200ms; } .my-node-exit { opacity: 1; } .my-node-exit-active { opacity: 0; transition: opacity 200ms; } ，然后在下一个刻度中添加in。