Fade a div in and out with button click

Ask us anything How do I?
1

Hi,

i have a div that should not be displayed.
with a button click it should be displayed.
i do this with a variable (false and true), a workflow (changes the variable value) and a conditional rendering (depending on the variable value).
no problem.

now i want to give the div an animation. it should fade in and fade out (not only display or not).
i add an anmination to the div and it fades in by the button click.
works.

but how to give the div now the second animation, that it should fade out, if i click the button again (and the variable becomes “false” again).

the keyframe for the fadein is:
@keyframes keyframe-edition-animation { 0% {opacity:0;width:0px;} 100% {opacity:1;width:200px;}}

any ideas?
thanks for help.
stefan

2

Hello,
has noone an idea?
I want to fade in and out a menusection by clicking a button.
The fade in works great.
but how to fade out the objekt then by clicking the button again?
I tryied to use states an put the diffrenet keyframes in to classes added to the states - but didnt work…
thanks for help.
Stefan