question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom transition for toasts

See original GitHub issue

Is 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:closed
  • Created 4 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
tmorehousecommented, Sep 5, 2019

this.$bvToast.toast() config object accepts a toaster property (string name). where you can specify your own custom toaster name.

https://bootstrap-vue.js.org/docs/components/toast#toasts-on-demand

The options argument accepts most of the props that the <b-toast> component accepts (with the exception of static, and visible) in <sampl>camelCase</samp> name format instead of <samp>kebab-case</samp>.

1reaction
tmorehousecommented, Sep 5, 2019

<b-toaster> can be used to create your own transitions for toasts via custom toaster target name and associated CSS

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found