Define a custom enter and exit animation
When it comes to animation the possibility are endless and it doesn't need to be complicated! Starting v7, css animations just works out of the box! You can write your own using the power of css or use any css animation library like animate.css or even copy paste from animista.
All you need to do is to import the cssTransition
and define your enter
and exit
classes.
The codesanbox below demonstrate how easy it is.
Handle transition based on the toast position
Some transitions are based on the toast position. This is the case for the default one. If you set appendPosition
to true
, the current position will be appended to the enter
and exit
class name:
Important
Don't forget to add the position as well when you write your css animations. If you pass multiple classes, the position will be appended only to the last one.
Prevent the toast from collapsing after the exit animation
By default, the remaining toast will collapse smoothly
This can be disabled as well:
Tweak collapse duration
The default duration is 300ms. This is also easy to change 💪