React: Анимация компонентов троичного вывода - PullRequest
Новая
       14

React: Анимация компонентов троичного вывода

0 голосов
/ 01 августа 2020

Меня удивляет проблема, с которой я столкнулся с этой простой процедурой анимации. У меня есть троичный элемент, который отображает ту или иную серию компонентов в зависимости от условия. Моей первой мыслью было обернуть их в div, который оживляет их, когда они появляются. К сожалению, это только анимация первого условия при загрузке страницы, переключение вкладок не имеет никакого эффекта. Есть какие-то мысли? 

const dashboard = () => {
  const [pane, setPane] = useState(0);
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
return (
...
        <MainContent>
          {pane === 0 ? (
            <animated.div style={props}>
              <LastModuleWidget {...mockLastModule} />
              <BookmarkedModules />
              <LatestActivity />
            </animated.div>
          ) : (
            <animated.div style={props}>
              <StatsModule />
              <PreviouslyCompleted />
            </animated.div>
          )}
        </MainContent>
...
)};
  • Перемещение оболочки анимации сразу за пределы троичной системы не имело никакого эффекта.
  • Я пробовал это с помощью Springs (см. Выше) и моей собственной реализации, нет эффект.

1 Ответ

0 голосов
/ 01 августа 2020

Хорошо, поэтому основная проблема в том, что у моего MainContent контейнера не было ключевой опоры. 

  <MainContent key={pane}>
          {pane === 0 ? (
            <_AnimateFadeIn>
              <LastModuleWidget {...mockLastModule} />
              <BookmarkedModules />
              <LatestActivity />
            </_AnimateFadeIn>
          ) : (
            <_AnimateFadeIn>
              <BookmarkedModules />
              <LatestActivity />
            </_AnimateFadeIn>
          )}
  </MainContent>

также, для простоты я вернулся к использованию своей собственной анимации, так как это простое исчезновение : 

const _AnimateFadeIn = styled.div`
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  animation: fadeIn 0.7s;
`;

Я использую стилизованные компоненты. Если вы хотите воссоздать это в CSS, просто напишите что-нибудь вроде:

div className="_animateFadeIn" или что-то еще. То же самое.

...