Simple CSS transitions in Elm?

Learn
1

I created a basic drop-down Discover widget using pure Elm essentially copying collapse.elm · GitHub. Now I want to make the collapse have a pretty animation. Is there a way to use simple CSS transition like in https://codepen.io/remilaudanski/pen/gbBGyN, or do I have to use a whole new library like elm-animation or elm-css?

2

Hi @nsadeh,
You have all the power of existing libraries like elm-animation, but you can also use plain CSS if you want.
I ported the example you referred to Elm:
https://ellie-app.com/gvJSZkSvXRKa1

As you will see, I just copied all the CSS to the <style> tag and added a little bit of state in the model to control the open state of the dropdown.

3 Likes
3

Hi @nsadeh, in case you haven’t tried it yet, elm-simple-animation 2.3.0 was quite nice the last time I used it for simple (stateless) animations.

4

Though this will only work for the content of known height.

5

I changed a few things around and looks like it works for variable height now, although you have to specify a max height.

.slide {
  clear: both;
  width: 100%;
  max-height: 0px;
  overflow: hidden;
  text-align: center;
  transition: max-height .4s ease;
}

.fake-checkbox:checked+.slide {
  max-height: 500px;
}
6

I’m sure it is, I just like to have as few dependencies as possible. For a first Elm app I’d like to see if I can build it in pure elm without any additional packages at all!

7

The trick with max-height is not perfect at all, transition will consider if height is 500. So for the not known general case height solution should be more complicated, and probably implementing it with pure elm will be not trivial, is possible at all, one needs to calculate containing items heights and set it on the container element that will be transitioned. I’m not aware of other more simple solutions for this problem.

8

It’s certainly not perfect, but it works in this use case as I know there’s a limited number of items. So investing in a perfect solution is not a good tradeoff here for me.

Feel free to post an elm-animation solution for academic purposes, though! I am sure others searching for a similar answer will be grateful.

9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.