最初应用 CSS 转换并在点击时通过转换移除？答案

【问题标题】：Initially apply CSS transform and remove with transition on click?最初应用 CSS 转换并在点击时通过转换移除？
【发布时间】：2021-04-06 01:34:54
【问题描述】：

我有一个简单的菜单隐藏/取消隐藏机制如下：

<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;
}

这完全符合我的预期——当我单击菜单控件时，它通过将菜单向上滑动到菜单的整个高度来隐藏菜单。问题是这是倒退的——我希望菜单最初是隐藏的，然后在单击控件时显示。因此，我重写了它以将翻译移动到初始（未检查）状态：

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

这不起作用。应用初始转换，但在触发选中状态时不会撤消。是否可以先应用转换，然后在检查时撤消它？

我也尝试过使用:not(:checked) 选择器，但行为相同：

#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;
}

【问题讨论】：

你有没有运气使用transition: none;，然后使用transition: transform 1s ease-in-out； ?
不，这只是删除了过渡的时间，但并没有解决问题。我在下面添加了解决方案。

标签： html css css-transitions transform

【解决方案1】：

这个问题的答案非常简单——我只需要添加一个转换来在选中时将最初应用的转换撤消为 0：

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

【讨论】：