Hey friends, I’m the author of elm-antd and am currently trying to implement closeable alerts (see here for the reference design). I have a proof-of-concept implementation that I have ported over to elm using elm-css . Just like in the codepen above, I dymaically add a is_closing attribute of true …

cc @Lucas_Payr … (had to add extra chars to post the comment haha)

[image] hexedhash: What I’m considering doing is querying the DOM using Browser.Dom.getElement in order to retrieve the height of the rendered element … but this just seems hacky in my opinion. Why does that seem hacky to you? The dynamic height needs a dynamic solution … If the css transit…

Why does that seem hacky to you? Suppose there are 3 alerts on the page, all of which have different heights. For each alert I need to generate a unique id value to call Browser.Dom.getElement and get the correct value back. Generating unique ids would likely impact the user-facing API of the ale…

What about this: It does the effect, but the bounding box box remains. You have remove it afterwards, but you would remove the modal anyway.

Using CSS Transitions on Auto Dimensions According to the Mozilla Developer Network docs, auto values have been intentionally excluded from the CSS transitions spec . It looks like it’s been requested by a few people , but when you think about it, it makes at least a little sense that it hasn’t been…

I’m beginning to think that I’m going to need to add an animation library. But because of the optimizations that elm does to reduce asset size, I think my concerns are less relevant - as long as the API for Alert remains simple and intiutive.

@francescortiz Thanks for the suggestion. However I need the bounding box to also reduce in size throughout the CSS transition :frowning:

"fold" animation in elm-css

Learn

Topic		Replies	Views
Simple CSS transitions in Elm? Learn	7	1873	February 2, 2022
Elm Animator - animating the height of an element Learn	4	850	April 26, 2020
Css transition on element creation/insertion Learn	14	3073	October 21, 2021
Elm Simple Animation 2.0.0 Show and Tell	0	1035	March 7, 2021
Collapsible Cards Learn	6	1213	April 10, 2020

"fold" animation in elm-css

Related topics