CSSTransition от response-transition-group без применения классов

Я пытаюсь интегрировать CSSTransition на свой сайт Gatsby, но он не применяет ни один из классов. Я использую модули CSS, и у меня есть <div>, который служит родительским элементом, который плавно появляется и исчезает, по сути применяя к нему эффект затухания и покрывая контент, пока он изменяется. У него есть класс fadEffect. Вот мой app-layout компонент и SASS.

AppLayout.tsx

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
          }
        }
      }
    }
  }
`;

AppLayout.scss

@import '~styles/config';

:global {
  @import '~styles/base';
}

.layout {
  display: block;
  min-height: 100vh;
}

.pageEnter {
  display: none;
}

.fadeEffect {
  display: none;
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: opacity 0.15s linear;

  &Enter {
    display: block;
    opacity: 0;
  }

  &Active,
  &Done,
  &Exit {
    display: block;
    opacity: 1;
  }

  &ExitActive {
    opacity: 0;
  }
}

Я буду рад предоставить более подробную информацию / код, если этого недостаточно. Я новичок в React и Gatsby, поэтому все еще изучаю жаргон. Заранее спасибо.


reactjs gatsby css-modules react-transition-group reactcsstransitiongroup
person Jesse Winton    schedule 11.09.2020    source источник
comment
Я добавил свое предложение в качестве ответа, если это все еще не работает, не могли бы вы поделиться ссылкой на codeandbox с воспроизведенной проблемой?   -  person Dipen Shah    schedule 27.09.2020

Ответы (1)


arrow_upward
2
arrow_downward

Я не вижу части вашего кода, в которой вы обновляете fadeEffectVisible до значения true для первого CSSTransition, и я вообще не вижу свойства in на втором CSSTransition, и я готов поспорить, что это ваша проблема. Взгляните на этот пример из React Transition Group, чтобы понять использование свойств. .

App.js

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>
  );
}

Style.css

.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 установлено в значение true, дочерний компонент сначала получит класс example-enter, а затем example-enter-active будет добавлен в следующем тике.

person Dipen Shah    schedule 27.09.2020
comment
Спасибо за это, после некоторого покопания кажется, что это проблема, когда fadeEffectVisible всегда возвращает false. При этом я не совсем уверен, как изменить состояние на true. Любые предложения, учитывая мой код выше? - person Jesse Winton; 28.09.2020
comment
@JesseWinton вы можете использовать любой четный обработчик, например, использовать щелчок или даже в конструкторе вы можете установить для статистики по умолчанию значение true. - person Dipen Shah; 28.09.2020