From 28a5c1302701df584eb4059c99401be09631cb92 Mon Sep 17 00:00:00 2001 From: kevinkace Date: Thu, 28 Jun 2018 09:47:48 -0700 Subject: [PATCH] Update onbeforeremove animation example to use animationend event --- docs/animation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/animation.md b/docs/animation.md index 54138756..95dd4c0c 100644 --- a/docs/animation.md +++ b/docs/animation.md @@ -75,7 +75,7 @@ var FancyComponent = { onbeforeremove: function(vnode) { vnode.dom.classList.add("exit") return new Promise(function(resolve) { - setTimeout(resolve, 500) + vnode.dom.addEventListener("animationend", resolve) }) }, view: function() { @@ -86,7 +86,7 @@ var FancyComponent = { `vnode.dom` points to the root DOM element of the component (`
`). We use the classList API here to add an `exit` class to `
`. -Then we return a [Promise](promise.md) that resolves after half a second. When we return a promise from `onbeforeremove`, Mithril waits until the promise is resolved and only then it removes the element. In this case, it waits half a second, giving the exit animation the exact time it needs to complete. +Then we return a [Promise](promise.md) that resolves when the `animationend` event fires. When we return a promise from `onbeforeremove`, Mithril waits until the promise is resolved and only then it removes the element. In this case, it waits for the exit animation to finish. We can verify that both the enter and exit animations work by mounting the `Toggler` component: