One easy answer is to use ember-css-transitions, an addon which makes this easy with a straightforward API. If you want or need a higher degree of customization, you can just peek under the hood and see how that addon works and reimplement something similar yourself.
One basic way you could implement something, off the top of my head, is create a modifier (which by definition receives the element itâs applied to and would be run when element was inserted), which adds a class to the element and then schedules removal of that class and possibly adding other classes at later intervals. That could be as flexible as you needed, but youâd want to be careful about the implementation: depending on how you scheduled the later hooks, you could end up with memory leaks or âelement does not existâ errors if you werenât careful.
Notably, this is exactly the kind of API ember-css-transitions supplies!
css-transition.js:126 Uncaught (in promise) TypeError: Cannot read property âinsertBeforeâ of null
at CssTransitionModifier.addClone (css-transition.js:126)
at CssTransitionModifier.willRemove (css-transition.js:67)
at ClassBasedModifierManager.destroyModifier (modifier-manager.js:38)
at CustomModifierState.destroy (index.js:7052)
at StringDestroyableDestructor.[DID_DROP] (util.js:355)
at util.js:266
at Set.forEach ()
at didDestroyAssociated (util.js:265)
at SimpleDestructor.[DID_DROP] (util.js:379)
at util.js:304
Remember how I said it would be easy to have problems during tear down? More seriously, Iâd file an issue on the addon repo. This is a hard thing to get juuuust right, and a big report (especially with a clear reproduction) is invaluable.