Fork me on GitHub
#hoplon
<
2019-12-29
>
mdiin14:12:01

Does Hoplon have an event that triggers immediately before a node enters or leaves the DOM?

mdiin14:12:17

Why I (think) I need this: I want to animate the filtering of a list, such that nodes that are not changed by the filter are smoothly transitioned to their new positions.

mdiin14:12:06

I found the hoplon.observer ns in brew, which adds support for mutation observers, and it does seem like a way to implement this, in combination with requestAnimationFrame. Any insights would be much welcome. 🙏

alandipert18:12:05

@mdiin afaik, mutation observers are the only way, hoplon doesn't have its own hooks

mdiin18:12:01

Thanks, that makes sense. I was hoping there was a more idiomatic way of doing this with hoplon, though I did suspect there wasn’t.

flyboarder19:12:36

@mdiin I would recommend the css only approach with hoplon

flyboarder20:12:36

the hoplon.observer namespace is still under active development, feel free to reach out if you need help

mdiin21:12:25

From what I have read, what I want to do is not possible with CSS only, because I need to apply css to new nodes before they are rendered for the first time. Now that I write this, I realise that I used the wrong example before, because maybe CSS transitioning on top and left will be enough to animate the element positions.

mdiin21:12:54

I will have to think some more on this before proceeding. Thanks.

flyboarder21:12:37

@mdiin applying css happens in hoplon before the node is rendered, the css is applied while the element is in memory, before it’s added to the DOM