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

Question

在我说什么之前，我查看了大约12个SO线程，其中包括您在我的JSBin中看到的代码：Why does this CSS transition event not fire when two classes are added?

问题是，将两个类背靠背添加得太快会导致无任何过渡动画。

我将此实现为一个遗留的JS自定义右键单击菜单，并通过首先将移动样式与.mobile-menu应用于.mobile-menu-show的动态类，然后将.mobile-menu应用于CSS，从而使其仅适用于CSS长按（因为没有右键单击鼠标按钮）。

过渡不会以这种方式运作。如果我在页面加载mobile-menu时加载它很好，但我不能，因为我根据如何添加了translateY(100%)类触发右键菜单（长按==移动样式，右键单击==正常样式）

演示代码：http://jsbin.com/maxuku/edit?html,css,output

==编辑==

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

Answer 1

请更改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;
}

你可以在这里参考动画 https://plnkr.co/edit/t0EB5CiuwtbWHqWXvlvz?p=preview