Animate.css classes are not working with cssTransition

[PierrickGT]

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.

[ammoradi]

did you try 'animated SlideInDown'?

[PierrickGT]

did you try 'animated SlideInDown'?

It doesn't work either, you get the following error with this syntax: react-toastify.js:145 Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('animated SlideInDown--top-center') contains HTML space characters, which are not valid in tokens.

[ammoradi]

@PierrickGT then it is actually a BUG! also you can create a new css class .example which extends .animated.SlideInDown and use .example in cssTransition

[dmarafetti]

I was having this same issue with animate.css. I tried adding 'animate__animated' to toastClassName into ToastContainer and did work. appendPosition=false btw

[fkhadra]

@PierrickGT may I ask that you reproduce the issue in codesanbox? Thank you

[PierrickGT]

@fkhadra here is a working version of the transitions: https://codesandbox.io/s/objective-hugle-mpi0l?file=/src/index.tsx And here is a non working version, using Animate classes slideInDown and slideOutUp : https://codesandbox.io/s/adoring-herschel-wyclj?file=/src/index.tsx

[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.

[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!