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

Question

I'm working on building a component that displays none or block depending on it's isActive prop.

I've managed to make it slideInDown using react-animations with styled-components like this.

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')};
`;

I need to make it slideOutUp now. However, I'm not sure how to implement both slideInDown and slideOutUp animations together.

How would I accomplish that?

Note: that works. But I don't know how to make it both slide in and out. I tried something like this below but that didn't work.

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')};
`;

Chasing Unicorn - Anshu · Accepted Answer · 2018-04-17T13:08:33.350

2

I went through the react-animations library, what I figured out is slideOutUp sets visibility: 'hidden.'

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

You can use animation-fill-mode: forwards, which helps in retaining the style after the animation ends.

You can do something like this (it works):

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

Here is the working example, for testing purpose onClick event I am setting {isActive: false}

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

edited Apr 17 '18 at 13:08

answered Apr 17 '18 at 11:48

Chasing Unicorn - Anshu

590
2
15

The animation works, my example was just badly written sorry. I need to make it slide back out again. Don't know how to make stuff slide in AND slide out. – Barry Michael Doyle Apr 17 '18 at 12:06
I have updated my answer. Let me know if it helps :) – Chasing Unicorn - Anshu Apr 17 '18 at 13:09
Got bogged down with other stuff. I'll give this a shot in a few days. Thanks man :) – Barry Michael Doyle Apr 19 '18 at 05:44
Haha will do ;) It did help :D – Barry Michael Doyle Apr 19 '18 at 13:39

Alessander França · Answer 2 · 2018-04-17T12:28:09.090

0

Display does not animate. You need to use opacity for toggling (1 to 0 and vice versa) and animation.

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

Considering that your code is working like you told me, you can use the attribute infinte at animation:

animation: 0.4s ${slideInAnimation} infinite;

I guess that it solves your problem.

edited Apr 17 '18 at 12:28

answered Apr 17 '18 at 10:24

Alessander França

2,697
2
29
52

The animation does work. I just don't know how to make it `animate` on hiding again. At the moment it only 1 way animates. – Barry Michael Doyle Apr 17 '18 at 11:16
Also, using `opacity` instead of display made the animation that original was working, not work anymore. – Barry Michael Doyle Apr 17 '18 at 11:18

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

2 Answers2