Javascript 添加两个类时CSS转换不起作用

在我说任何事情之前，我看了十几个线程，包括这一个，你会在我的JSBin中看到其中建议的代码：

问题是，背对背地添加两个类太快，不会产生任何过渡动画

我正在将其应用到一个遗留的JS自定义右键单击菜单中，并通过首先使用

.mobile menu

应用移动样式，然后是

.mobile menu的动画类，当它们长按（因为没有右键单击鼠标按钮）时，会显示

不过，转换不是这样工作的。如果我在页面加载上添加
.mobile menu
，这没问题，但我不能，因为我正在根据右键单击菜单的触发方式添加
mobile menu
类（长按==移动样式，右键单击==普通样式）

演示代码：

==编辑==

希望澄清一下，我希望您在默认情况下看到的菜单隐藏起来（
translateY（100%）
），然后从底部向上滑动。如果使用Slack，请长按消息。或者iPhone在这里有同样的概念，它会向上滑动：

请按以下方式更改css类

.context-menu {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all 0.25s; /* Safari */
  transition: all 0.25s;
}

.mobile-menu {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.mobile-menu-show {
  bottom: 0;
}

你可以参考这里的动画
您的课程移动菜单和移动菜单显示有相反的翻译（100%）和（0%）。在“开始平移”值处设置项，并让添加的类更改它。这样，您就不会添加两个相互抵消的类。我仍在试图弄清楚您在寻找什么。。你是说像这样吗？转换已经存在，但功能对我来说仍然没有意义。@mhodges我更新了我的原始帖子。它基本上与JSBin中的相反。当您单击按钮时，您看到的可见内容（在真实应用程序中隐藏）将使用
translateY（100%）
隐藏，然后使用
translateY（0%）
从底部向上设置动画。在滑出屏幕之前，最终结果是
translateY（100%）
会隐藏菜单，但不会显示（afaik）。0%会将它放在我想要的地方（
底部：0；左侧：0
）。所以这个例子正确地开始了，但是当它运行时，它会在屏幕外动画OK，我有点困惑。你在找这样的东西吗？是的！这就是我要找的动画！很好，我会更新我的答案。对不起，刚才有点混乱