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;

过渡按预期进行。

Answer 2

以前，当您有 时transition: all 1s ease，翻译和顶部值会变得动画。但一旦你把它改为transition: transform 1s ease top财产，就被排除在外了。

 .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;
      /* edited the line below by adding top also*/
      transition: transform 1s ease, top 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%;
    }