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