CSS flexbox下justify-content过渡效果失效的原因及解决方法

原因分析 #

CSS过渡（transition）仅支持可插值的数值型属性（比如长度、颜色、百分比、transform位移值等），这类属性能在两个状态之间计算出连续的中间值，从而实现平滑过渡。而justify-content的left、center属于离散关键字，浏览器无法在它们之间生成过渡所需的中间状态，因此切换时只会直接突变，不会有动画效果。

修复方案 #

既然justify-content本身没法过渡，我们可以换用支持过渡的数值属性模拟同样的布局变化，推荐两种可行方案：

方案1：利用margin:auto实现过渡

通过调整导航内容容器的margin值（margin属于可过渡的数值属性），模拟从左对齐到居中的效果：

1. 调整HTML结构：把nav内部的内容包裹在一个容器中

<nav>
  <div class="nav-inner">导航内容</div>
</nav>

2. 修改CSS代码：

body{
    background-color: white;
    transition:all 1s;
}
img{
    width:30%;    
}
div{
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items:center;
}
nav{
    text-transform: uppercase;
    border-bottom:1px solid #c6bebe;
    padding:10px;
    margin:15px 0;
    font-family: Raleway,sans-serif;
    font-size:30px;
    display: flex;
    width: 100%; /* 让nav占满父容器宽度 */
}
.nav-inner {
    margin-left: 30px; /* 对应原布局的左偏移 */
    transition: margin 2s ease; /* 给margin添加过渡 */
}
h1{
    font-size: 40px;
    font-weight: 900;
    transition:all 1s;
}
@media (max-width:950px){
    body{
        background-color: rgb(28, 27, 27);
    }
    div{
        flex-direction: column;
    }
    img{
        width: 100%;
        margin:5px;
    }
    .nav-inner {
        margin-left: auto;
        margin-right: auto; /* 通过auto margin实现居中 */
    }
    h1{
        color:rgb(255, 255, 255);
    }
}

方案2：利用transform: translateX()实现过渡

通过位移变换实现内容的平滑移动，无需调整margin：

1. 保持HTML结构不变，修改.nav-inner的CSS：

.nav-inner {
    transition: transform 2s ease;
}
@media (max-width:950px){
    .nav-inner {
        /* 计算平移距离：容器一半宽度减去视口一半宽度，实现居中 */
        transform: translateX(calc(50vw - 50%));
    }
}

内容的提问来源于stack exchange，提问作者Social