CSS 过渡不适用于转换

Question

我有以下 CSS:

.popup {
  background-color: white;
  border-style: solid;
  z-index: 1001;
  box-shadow: 15px 15px 10px rgba(0,0,0,.3);
  border-radius: 3px;
  position: absolute;
  -webkit-transition: -webkit-transform 1s ease;
  -moz-transition: -moz-transform 1s ease;
  -o-transition: -o-transform 1s ease;
  -ms-transition: -ms-transform 1s ease;
  transition: transform 1s ease;
}

.centered {
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hidden {
  top:100%;
  visibility: hidden;
}

.visible {
  top: 50%;
}

我想要做的是执行动画 bottom->top当弹出窗口可见时 top->bottom当它被隐藏时。

之前，我用的是 transition: all 1s ease;它正在工作，但它很慢，所以我决定使用 transition: transform 1s ease; .这样做转换不再起作用，即使我认为代码应该没问题。有谁知道为什么以及如何解决它？

谢谢你。

编辑

这是一个有效的 CodePen 示例:

http://codepen.io/andipavllo/pen/QyeJjq

这是一个不起作用的例子:

http://codepen.io/andipavllo/pen/KVOrgQ

它们完全相同，除了 transition: transform 1s ease;而不是 `transition: all 1s easy;

Answer 1

在工作示例中，您正在转换 all属性而不仅仅是transform属性:这很重要，因为还有 top属性涉及到效果，从100%变化至 50% (当您删除类 hidden 并添加类 visible 时)。

正如您可以验证的那样，如果您更改

transition: transform 1s ease;

进入

transition: transform 1s ease, top 1s ease;

过渡按预期进行。