[CSS] Remove off-screen nodes from the DOM

[lorensr]

    {{#momentum plugin='css'}}
    {{#if toggle}}
    <div id="foo">...</div>
    {{/if}}
    {{/momentum}}

When toggle goes back and forth between true and false often, I get a long list of <div id="foo" class="in out off-screen">. I think it would be good if they were removed from the DOM?

[lorensr]

My transition was 500s instead of 500ms, so the animation hadn't ended.

[lorensr]

Reopening – the title still applies, but in a different situation. I'm guessing the CSS plugin uses an animation end hook to remove .in.offscreen or .out.offscreen, and in the latter case, remove the node. In situations where the animation does not complete, a potentially-long list of nodes are left behind in the DOM. In the above situation, that was due to a long duration, but in the below situation, I want an animation when it comes in but immediate disappearance when it goes out, and it looks like the display none prevents the animation from happening, and thus the node never gets removed:

[tmeasday]

Hi @lorensr - we have a timeout option to the CSS plugin to deal with exactly these kind of edge cases. Give it a go, let me know if you think the docs need updating.

[lorensr]

Thanks, looks like this works:

{{#momentum plugin='css' timeout=1000}}

Would be nice to just add that as an example – shows where the argument
goes and the fact that it's an integer in ms versus '1s' string, etc.

On Wed, Apr 22, 2015 at 11:42 PM, Tom Coleman notifications@github.com
wrote:

Hi @lorensr https://github.com/lorensr - we have a timeout option to
the CSS plugin to deal with exactly these kind of edge cases. Give it a go,
let me know if you think the docs need updating.

—
Reply to this email directly or view it on GitHub
#26 (comment)
.