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
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
true, the current position will be appended to the
exit class name:
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 💪