以 translate(-50%, -50%) 为中心的元素 - 过渡不起作用

Question

我有一个 div：

<div class="element">
</div>

使用这些 css 属性以屏幕为中心：

.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

现在我希望这个 div 在添加一个类后改变它的高度

.bigger {
    height: 80%;
}

但我想让它动画，所以我添加了一个过渡属性：

.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: height .4s ease-in-out;
}

但是，在添加“更大”类后高度没有动画。如何让它工作？ 请注意，我实际上使用 SASS 和 Jeet 网格系统来使这个 div 居中（使用 @include align(b)）。 这是工作的 CodePen - codepen

Answer 1

  transition: height .4s ease-in-out, transform .4s ease in-out;

改为：

  transition: height .4s ease-in-out, transform .4s ease-in-out;

transition-timing-function 是 ease-in-out 不是 ease-in-out