javascript - 从 0 到 x 的 CSS 宽度转换导致内容压缩

Question

JsFiddle:https://jsfiddle.net/323qLz0y/

将鼠标悬停在灰色框上。看看当左侧面板滑出时，内容是如何被垂直挤压的？当过渡结束时，内容变为“良构”。如何在内容滑出时使内容“格式正确”？谢谢。

Stack 需要一些代码，所以这是左侧面板部分。我试过 white-space:nowrap 但它强制将内容放在一行上，这不是我想要的。

.left-panel {
width: 0px;
transition: width 1s;
float:left;
overflow: hidden;
height: 250px;
}
.left-panel-slide {
    width:200px;
}

Answer 1

只需给 p 和 h1 设置宽度即可实现您想要的效果

$('.middle-panel').on('mouseover', function () {
    $('.left-panel').addClass('left-panel-slide');
    $('.container').addClass('container-slide');
});

$('.middle-panel').on('mouseout', function () {
    $('.left-panel').removeClass('left-panel-slide');
    $('.container').removeClass('container-slide');
});

.container {
    position: absolute;
    border: 3px blue solid;
    width: 200px;
    height: 250px;
    left: 300px;
    top:30%;
    transition: width 1s, left 1s;
}
.container-slide {
    width: 400px;
    left:100px;
}
.middle-panel {
    background:grey;
    width:200px;
    height: 250px;
    float:left;
}
.left-panel {
    width: 0px;
    transition: width 1s;
    float:left;
    overflow: hidden;
    height: 250px;
}
.left-panel p,.left-panel h1{
    width:200px;
}
.left-panel-slide {
    width:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="container">
    <div class="left-panel">
         <h1> Hello World! </h1>

        <p>Lorem ipsum dolor sit amet, ea vero veritus eam, ad aperiri inermis consequuntur est. Id mundi accumsan eum, ius modo dicunt quaerendum ex.</p>
    </div>
    <div class="middle-panel"></div>
</div>