React-modal: Is it possible to add animation like bounce?

[victorpavlenko]

Is it possible to add animation like bounce?
I try to add some code:

 & .ReactModal__Content {

        &--after-open {
          animation-name: bounceIn;
          animation-duration: 450ms;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          opacity: 1;
        }
}

@keyframes bounceIn{ 0%{ opacity: 0; transform: scale(0.3) translate3d(0,0,0); } 50%{ opacity: 0.9; transform: scale(1.1); } 80%{ opacity: 1; transform: scale(0.89); } 100%{ opacity: 1; transform: scale(1) translate3d(0,0,0); } }

But its doesnt work

[diasbruno]

@Xurma2 Check out the example css https://github.com/reactjs/react-modal/blob/master/examples/basic/app.css. Maybe you can find something missing.

[diasbruno]

Also, remember to set the closeTimeoutMS to the time of the animation (when closing).

[diasbruno]

Any progress on this issue?

[victorpavlenko]

Still no have time to try. I'll write when I do this

2017-12-22 15:21 GMT+03:00 Bruno Dias [e-mail]:

Any progress on this issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/reactjs/react-modal/issues/587#issuecomment-353587911,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AE6yKLEp0VKiCkyE_cpLtXvLH0mW9dNAks5tC56xgaJpZM4RKKgy
.

--
Frontend|React|UI: victor-js.com
SkypeID: victor.developer

[ianflorentino]

this is achievable by adding the animation to the styles content object on the styles prop of the Modal component:

<Modal styles={{ content: { animation: "bounceIn .5s ease-in-out" } }} />

[victorpavlenko]

@diasbruno don't have any idea why it doesn't work
For any element, animation works fine but for content, it doesn't

@ianflorentino
It doesn't work for me