CODEWITHSUNDEEP
cssreactjsstyled-componentsreact-animations
Barry Michael Doyle
Barry Michael Doyle

Reputation: 10618

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

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

Upvotes: 0

Views: 5070

Answers (2)

Chasing Unicorn - Anshu
Chasing Unicorn - Anshu

Reputation: 600

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

Upvotes: 3

Alessander Franca
Alessander Franca

Reputation: 2753

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.

Upvotes: 0

Related Questions