I have some experience in this, and for basic stuff you can use css. And it
keeps your elm code nicely focused on state, without complexity of having
to manage state transitions inside state.
e.g. for displaying and hiding a sidebar-menu which slides in from the
left, or a dropdown-menu, something like:
- have an menuIsOpen flag in your model,
- and in your view add a class "open" to your menu
- and in your css have something like this:
.sidebar {
position: absolute;
will-change: transform;
transform: translateX(-102%);
transition: transform 400ms;
}
.sidebar.open {
transform: translateX(0%);
}
.dropdown {
position: absolute;
opacity: 0;
will-change: opacity;
pointer-events: none;
transition: opacity 400ms;
}
.dropdown.open {
opacity: 1;
pointer-events: auto;
}
What happens here is that elm will render the new state, and after that,
css animation transitions to the new state on screen.
However, this only works for items that you can put/ which are in the DOM
both before and after the animation. And you cannot use "display: none" to
hide items (because css does not animate that). For more advanced
animations:
- Adding a new item to a list (typically the new item is not in the DOM
before it is added)
- Removing items from a list (the removed item is typically not rendered
after the removal).
- Functions or logic that should be available only after the transition
has completed. (e.g. first enlarge some square, and only afterwards display
contents of the square)
- Page transitions from one page to the next.
- Reversible animations: e.g. if the users clicks the "close" button
midway in the opening transition.
There are ways to get more done with css, but I always need more
elm-trickery too. I find that doing more complex animations fully in elm
gives me the most maintainable code.
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
