元素以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;
}

然而，在添加更大的＆＃39;之后，身高并没有动画。类。如何让它工作？ 请注意，我实际上使用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;

过渡时间功能是易于进出而不是轻松进出