Custom transition for toasts
See original GitHub issueIs your feature request related to a problem? Please describe…
Although the toast component is working well. I think it would be very nice to be able to set own transform effects to toasts instead of just fading in and fading out.
Describe the solution you’d like
The solution can be similar to the one in modals. In modals we are able to set the $modal-fade-transform
and $modal-transition
to customize our modal animations.
Describe alternatives you’ve considered
An alternative also can be creating some preset animations like fade
, fadeInRight
, zoomIn
etc. But for me this does not sound a good idea.
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Define a custom enter and exit animation | React-Toastify
#Handle transition based on the toast position · #Prevent the toast from collapsing after the exit animation · #Tweak collapse duration.
Read more >Custom animation for Toast enter/exit? - android
Toasts are displayed using a system template that can't be changed so short answer is no you cant change the toast animation. however...
Read more >Define a custom enter and exit transition
The toast relies on `react-transition-group` for the enter and exit transition. Any transition built with react-transition-group should work!
Read more >Implementing animated toasts in React - LogRocket Blog
Learn how to make a toast component with animations using React, Framer Motion, and Zustand, plus some custom Hooks for good measure.
Read more >Custom & Reusable Toast Component with Angular ...
Then in the toast.component.html file, we can add the animation trigger that tells the app which element we'll define with animation specs.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
this.$bvToast.toast()
config object accepts atoaster
property (string name). where you can specify your own custom toaster name.https://bootstrap-vue.js.org/docs/components/toast#toasts-on-demand
<b-toaster>
can be used to create your own transitions for toasts via custom toaster target name and associated CSS