I'm building a Lightning Web Component for a standalone Aura app where ShowToastEvent isn't available. I've seen an example of a custom LWC toast component that shows and hides itself using slds-show and slds-hide.

This component works OK, but it seems to appear and disappear kind of abruptly. What I'd like to do is have the element gracefully slide down from the top when it's shown, and slide up and out of view when it's hidden. I'm not expert enough in CSS to know the most elegant way to accomplish this that would play well with the existing SLDS framework.

Here's a playground link to get folks started. Thanks in advance!


Taake a look at the changes I've made here: https://developer.salesforce.com/docs/component-library/tools/playground/c_TB0R6b/13/edit

I've removed the slds-is-relative class on line 3 of toast.html, and added a few rules to toast.css. Cheers!

| improve this answer | |
  • 1
    Awesome! Best implementation of a custom toast I've seen yet. Hope folks will stumble across this code and use it. :-) – Matthew Souther Jan 17 at 0:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.