css - 如何使用带 react 动画的样式组件制作滑入和滑出

Question

我正在构建一个显示 none 或 block 的组件，具体取决于它的 isActive 属性。

我已经设法使用 react-animations 和 styled-components 像这样slideInDown。

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