# Simple CSS transitions in Elm?

**URL:** <https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103>\
**Category:** Learn\
**Created:** [January 25, 2022, 5:51am UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103 "2022-01-25T05:51:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nsadeh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nsadeh/32/4444_2.png) [@nsadeh](https://discourse.elm-lang.org/u/nsadeh)\
**Post date:** [January 25, 2022, 5:51am UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/1 "2022-01-25T05:51:50Z")

</div>

I created a basic drop-down Discover widget using pure Elm essentially copying [collapse.elm · GitHub](https://gist.github.com/stuf/69ea250606b3d754326106f5c42e9777). 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](https://codepen.io/remilaudanski/pen/gbBGyN), or do I have to use a whole new library like elm-animation or elm-css?

---

<div class="post-metadata">

**Author:** ![joanllenas](https://avatars.discourse-cdn.com/v4/letter/j/e79b87/32.png) [@joanllenas](https://discourse.elm-lang.org/u/joanllenas)\
**Post date:** [January 25, 2022, 7:09am UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/2 "2022-01-25T07:09:58Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![mattpiz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mattpiz/32/860_2.png) [@mattpiz](https://discourse.elm-lang.org/u/mattpiz)\
**Post date:** [February 1, 2022, 7:29pm UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/3 "2022-02-01T19:29:10Z")

</div>

Hi @nsadeh, in case you haven’t tried it yet, [elm-simple-animation 2.3.0](https://package.elm-lang.org/packages/andrewMacmurray/elm-simple-animation/latest/) was quite nice the last time I used it for simple (stateless) animations.

---

<div class="post-metadata">

**Author:** ![romper](https://avatars.discourse-cdn.com/v4/letter/r/ed8c4c/32.png) [@romper](https://discourse.elm-lang.org/u/romper)\
**Post date:** [February 2, 2022, 8:03am UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/4 "2022-02-02T08:03:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nsadeh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nsadeh/32/4444_2.png) [@nsadeh](https://discourse.elm-lang.org/u/nsadeh)\
**Post date:** [February 2, 2022, 1:42pm UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/5 "2022-02-02T13:42:10Z")

</div>

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

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![nsadeh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nsadeh/32/4444_2.png) [@nsadeh](https://discourse.elm-lang.org/u/nsadeh)\
**Post date:** [February 2, 2022, 1:42pm UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/6 "2022-02-02T13:42:57Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![romper](https://avatars.discourse-cdn.com/v4/letter/r/ed8c4c/32.png) [@romper](https://discourse.elm-lang.org/u/romper)\
**Post date:** [February 2, 2022, 4:16pm UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/7 "2022-02-02T16:16:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nsadeh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nsadeh/32/4444_2.png) [@nsadeh](https://discourse.elm-lang.org/u/nsadeh)\
**Post date:** [February 2, 2022, 5:43pm UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/8 "2022-02-02T17:43:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 12, 2022, 5:44pm UTC](https://discourse.elm-lang.org/t/simple-css-transitions-in-elm/8103/9 "2022-02-12T17:44:14Z")

</div>

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