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 …

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.

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

Topic		Replies	Views
Simple Animation v1.0.0 Show and Tell	0	546	December 31, 2020
Elm Simple Animation 2.0.0 Show and Tell	0	1030	March 7, 2021
"fold" animation in elm-css Learn	7	1160	September 18, 2020
Css transition on element creation/insertion Learn	14	3031	October 21, 2021
Feedback on Animation Utils Request Feedback	7	984	January 6, 2021

Simple CSS transitions in Elm?

Related topics