如何使用带有反应动画的样式组件制作滑入和滑出

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

Display 没有动画。您需要使用不透明度来切换（1 到 0，反之亦然）和动画。

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

考虑到你的代码像你告诉我的那样工作，你可以在动画中使用 infinte 属性：

animation: 0.4s ${slideInAnimation} infinite;

我想它可以解决您的问题。

Answer 2

我浏览了 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

如何使用带有反应动画的样式组件制作滑入和滑出

How to make slideIn AND slideOut with styled-components with react-animations

css

reactjs

styled-components

react-animations