Animate.css classes are not working with cssTransition

Do you want to request a feature or report a bug? Report a bug.

What is the current behavior? Animate.css classes like slideInUp should work with cssTransition but it is not the case.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

Here is my current setup to be able to use Slide transitions with cssTransition.

const CloseButton = () => <span className="icon-close toaster__icon" />;

toast.configure({
    className: 'toaster-container',
    toastClassName: 'toaster',
    bodyClassName: 'toaster__message',
    closeButton: <CloseButton />,
    hideProgressBar: true,
    position: 'top-center',
    transition: cssTransition({
        enter: `Toastify__slide-enter`,
        exit: `Toastify__slide-exit`,
        duration: [350, 1400],
        appendPosition: true,
    }),
});

I’ve tried to use the following cssTransition configuration but it wasn’t working:

    transition: cssTransition({
        enter: `slideInDown`,
        exit: `slideOutUp`,
        duration: [350, 1400],
        appendPosition: true,
    }),

What is the expected behavior? Animate.css transitions should work with cssTransition.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16 and the behavior should be the same on any browser.

[PierrickGT]

hello @PierrickGT , sorry for the late reply. So the first code sandbox works because it uses the built-in transition provided by the library. There are 4 of them:

• bounce
• slide
• zoom
• flip Your first example could have been written as follow.

toast.configure({
  // others options
  transition: Slide
});

Your second example does not work because the class names you are using slideIn and slideOut doesn’t exist. If you want to you a custom animation and not a built-in you have to provide the corresponding css as well.

In your case, you probably need to import animate.css as well.

Thanks for the explanation!

[fkhadra]

hello @PierrickGT , sorry for the late reply. So the first code sandbox works because it uses the built-in transition provided by the library. There are 4 of them:

• bounce
• slide
• zoom
• flip Your first example could have been written as follow.

toast.configure({
  // others options
  transition: Slide
});

Your second example does not work because the class names you are using slideIn and slideOut doesn’t exist. If you want to you a custom animation and not a built-in you have to provide the corresponding css as well.

In your case, you probably need to import animate.css as well.