使用toggleClass和Keyframes实现汉堡菜单时可见性异常问题

问题根因 #

• <h1> span的初始样式仅设置了可见性隐藏和透明度为0，未设置初始偏移位置，元素默认停留在动画结束的最终位置（translate(0,0)）
• 点击按钮添加text-warning-anim类时，visibility: visible和opacity:1会立即生效，但你给动画设置了0.5s的延迟，所以会先看到完整显示在正确位置的文字，等0.5s后动画才会从140%偏移位置开始执行，就出现了“先闪一下再动画”的异常。

解决方案 #

仅需要修改两处CSS规则即可修复：

1. 给h1 span添加初始偏移属性，让元素隐藏时就停在动画起始位置，同时移除和动画冲突的transition规则：

h1 span {
  display: block;
  visibility: hidden;
  opacity: 0;
  /* 新增以下两行 */
  transform: translate(0,140%);
  transition: none;
}

2. 给text-warning-anim的动画添加forwards填充模式，保证动画结束后元素停留在最终状态，同时把opacity的变化整合到动画里避免时序冲突：

.text-warning-anim {
  visibility: visible;
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
}
 
@keyframes reveal {
  0% {
    opacity: 0;
    transform: translate(0,140%);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}

如果需要优化关闭时的退场效果，可以额外给h1 span添加退场过渡规则，或者调整jQuery的类切换时序，匹配overlay的收起动画时长即可。

内容的提问来源于stack exchange，提问作者user2183923