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…

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 …

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

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-h…

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!

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 height…

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 wi…

Simple CSS transitions in Elm?

Learn

mattpiz February 1, 2022, 7:29pm 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.

Topic		Replies	Views
Simple Animation v1.0.0 Show and Tell	1	545	January 10, 2021
Elm Simple Animation 2.0.0 Show and Tell	1	1029	March 17, 2021
"fold" animation in elm-css Learn	8	1156	September 28, 2020
Css transition on element creation/insertion Learn	15	3008	October 31, 2021
Feedback on Animation Utils Request Feedback	8	981	January 16, 2021

Simple CSS transitions in Elm?

Related topics