bluenote10 bluenote10 - 3 years ago 142
Javascript Question

How to implement Vue's transition group feature in Elm?

We are considering to switch from Vue to Elm for a project, which relies a lot on Vue's transition group feature. Our use case is a simplified version of the shuffle example (see link above for a demo): If the position of two elements in a list are swapped in the model, the DOM elements should swap their position smoothly by means of a transition. Another example from the documentation:

enter image description here

What would be the best way to achieve the same effect in Elm? We can't use absolute positioning (+ hardcoding geometry in the model), because in general, the layout still relies on standard CSS + browser functionality. It is also not quite clear if this functionality could be achieved with ports, or whether it would require to have low-level control over the virtual DOM rendering.

Answer Source

As far as I know, there isn't a way of getting access to low-level render events in the Html or the Virtual DOM Elm package.

However, Elm does allow for port communication, so, you should be able to add this ability to your application, triggering the animations to occur through ports.

I've put together a sample here: https://ellie-app.com/jcCqXrC52a1/1

This uses the same general approach that Vue does, but uses the JS library that they link to from their docs, https://github.com/GoogleChrome/flipjs

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download