Initially apply CSS transform and remove with transition on click? - html

Question

I have a simple menu hide / unhide mechanism as below:
<input type="checkbox" id="menu_control" />
<label for="menu_control" class="navbar toggle button" />
<div class="menu category foo">
...
</div>
/* menu animation */
.menu {
transition: transform 1s ease-in-out;
}
#menu_control:checked ~ .menu {
transform: translateY(calc(var(--menu-total-height) * -1 ));
transition: transform 1s ease-in-out;
}
This works exactly as I would expect it to - it hides the menu by sliding it up by the full height of the menu when I click the menu control. The problem is that this is backwards - I want the menu to initially be hidden, then show when the control is clicked. I thus re-wrote it to move the translation to the initial (unchecked) state:
.menu {
transform: translateY(calc(var(--menu-total-height) * -1 ));
transition: transform 1s ease-in-out;
}
#menu_control:checked ~ .menu {
transition: transform 1s ease-in-out;
}
This does not work. The initial transform is applied, but it is not undone when the checked state is triggered. Is it possible to initially apply a transform, then undo it on check?
I have also attempted to use the :not(:checked) selector, but the behaviour is the same:
#menu_control:not(:checked) ~ .menu {
transform: translateY(calc(var(--menu-total-height) * -1 ));
transition: transform 1s ease-in-out;
}
#menu_control:checked ~ .menu {
transition: transform 1s ease-in-out;
}

Answer 1

The answer to this was frustratingly simply - I simply needed to add a transform to undo the initially applied translation to 0 when checked:
.menu {
transform: translateY(calc(var(--menu-total-height) * -1 ));
transition: transform 1s ease-in-out;
}
#menu_control:checked ~ .menu {
transform: translateY(0);
transition: transform 1s ease-in-out;
}