javascript - 添加两个类时 CSS 过渡不起作用

Question

在我说什么之前，我查看了大约十几个 SO 线程，包括这个线程，您也会在我的 JSBin 中看到建议的代码:Why does this CSS transition event not fire when two classes are added?

问题是太快地背对背添加两个类会导致没有任何过渡动画。

我正在将其实现到遗留 JS 自定义右键单击菜单中，并通过首先使用 .mobile-menu 应用移动样式然后使用 的动画类使其仅使用 CSS 使其移动友好.mobile-menu-show 当他们长按时(因为没有鼠标右键)。

虽然转换不是这样工作的。如果我在页面加载时添加 .mobile-menu 没问题，但我不能，因为我添加的 mobile-menu 类基于如何 触发右键菜单(长按==移动样式，右键==普通样式)

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

==编辑==

希望澄清一下，我希望您在默认情况下看到的菜单隐藏 (translateY(100%))，然后从底部向上滑动。如果您使用 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