Как сделать slideIn AND slideOut с style-компонентами с анимацией реакции

Question

Я работаю над созданием компонента, который отображает none или же block в зависимости от этого isActive двигательный

Мне удалось это сделать slideInDown с помощью react-animations с styled-components как это.

import styled, { keyframes } from 'styled-components';
import { ifProp } from 'styled-tools';
import { slideInDown } from 'react-animations';

const slideInAnimation = keyframes`${slideInDown}`;

const MyComponent = styled.div`
  animation: 0.4s ${slideInAnimation};
  display: ${ifProp('isActive', 'block', 'none')};
`;

Мне нужно сделать это slideOutUp сейчас. Тем не менее, я не уверен, как реализовать оба slideInDown а также slideOutUp анимации вместе.

Как бы я это сделал?

Примечание: это работает. Но я не знаю, как заставить его как скользить, так и выходить. Я попробовал что-то вроде этого ниже, но это не сработало.

import styled, { keyframes } from 'styled-components';
import { ifProp } from 'styled-tools';
import { slideInDown, slideOutUp } from 'react-animations';

const slideInAnimation = keyframes`${slideInDown}`;
const slideOutAnimation = keyframes`${slideOutUp}`;

const MyComponent = styled.div`
  animation: 0.4s ${slideInAnimation}, 0.4s ${slideOutAnimation};
  display: ${ifProp('isActive', 'block', 'none')};
`;

Answer 1

Я прошел через react-animations библиотека, что я понял, это наборы slideOutUp visibility: 'hidden.'

const slideOutUp: Animation = {
  from: {
    transform: translate3d(0, 0, 0)
  },
  to: {
    visibility: 'hidden',
    transform: translate3d(0, '-100%', 0)
  }
};

Ты можешь использовать animation-fill-mode: forwards, который помогает сохранить стиль после окончания анимации.

Вы можете сделать что-то вроде этого (это работает):

const MyComponent = styled.div`
  animation: ${ifProp(
    "isActive",
    `0.4s ${slideInAnimation}`,
    `0.4s ${slideOutAnimation} forwards`
  )};
`;

Вот рабочий пример, для целей тестирования onClick событие, которое я устанавливаю {isActive: false}

https://codesandbox.io/s/949ql6p6no

Answer 2

Display не одушевляет Вам нужно использовать непрозрачность для переключения (от 1 до 0 и наоборот) и анимации.

const myComponent = styled.div`
  animation: 0.4s ${slideInAnimation};
  opacity: ${ifProp('isActive', 1, 0)};
`;

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

animation: 0.4s ${slideInAnimation} infinite;

Я думаю, что это решает вашу проблему.