CSS字体过渡不适用于flex

Question

我正在使用

.parent {
    display: flex;
    align-items: center;
}

p {
    font-size: 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

p:hover {
    font-size: 20px;

}

<div class="parent">
   <p>Hello</p>
</div>

只要父级具有显示弹性，更改字体大小时的转换就不起作用。它在删除flex属性时有效。有没有解决这个问题？

Answer 1

我在Firefox，Safari和Chrome中尝试过您的代码，当字体大小发生变化时，过渡效果正常。

如果它不适合您，您可以尝试添加display：-webkit-flex;随着显示：flex;在你的CSS代码中这样：

display: -webkit-flex;
display: flex;