如何使用带有反应动画的样式化组件制作幻灯片输入和幻灯片输出

Question

我正在努力构建一个组件，该组件根据isActive道具显示none或block。

我已经设法使它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;

我想它解决了你的问题。