Just like in the codepen above, I dymaically add a
is_closing attribute of
true to the element when it’s clicked in order to change various css properties (height, opacity and overflow).
There is one issue though. My proof-of-concept implementation requires an explicit height value so that the css transition can go from some known height down to 0 smoothly.
Without an explicit height, the animation does not work, and the element’s CSS properties change immediately without a transition. If you want to see what I mean, remove the
height CSS property from the
#info-box selector, or make the
auto. Then you’ll see that the animation no longer works.
An easy fix would be to add
height (px whateverHere) in my elm code, but I don’t want to hard-code a height on my actual elm implementation because that would mean that the alert’s height doesn’t automatically adjust to the contents of the alert component.
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.
I am also trying to not use 3rd party packages either as most of them impose a particular way of doing things that would cascade down to users of elm-antd.
Any suggestions on how to address this? Maybe there’s an entirely different way of doing this animation that is a lot simpler?