CSS宽度从0到x的过渡会导致内容压扁

CSS width transition from 0 to x causes content squish

本文关键字：CSS 更新时间：2023-09-26

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

$('.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-slide {
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

悬停在灰色框上。看到了吗，当左边的面板滑出来的时候，内容垂直被压扁了。当过渡结束时，内容变得"格式良好"。我怎样才能使内容"格式良好"?当它滑出来的时候?谢谢。

Stack需要一些代码，所以这里是左边的面板部分。我尝试了white-space:nowrap，但它强制内容到一行，这不是我想要的。

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

简单地给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>

只需将滑动的内容包装在固定宽度的div内。

<div class="container">
<div class="left-panel">
    <div class="content-wrapper">
        <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>
   <div class="middle-panel"></div>
</div>
.content-wrapper {
 width: 200px;
 }

https://jsfiddle.net/323qLz0y/

你必须修复孩子的宽度，像这样(参考JS的fiddle HTML):

.left-panel h1, .left-panel p{
   width: 200px; 
}

这一切都是非常可行的，无需JavaScript或对内部元素进行额外的样式。

.container {
    position: absolute;
    border: 3px blue solid;
    width: 200px;
    height: 250px;
    left: 300px;
    top:30%;
    transition: width 1s, left 1s;
}
.middle-panel {
    background:grey;
    width:200px;
    height: 250px;
    float:left;
}
.left-panel {
    width: 180px;
    padding: 10px;
    transition: all 1s;
    overflow: hidden;
    height: 250px;
    position: absolute;
    left: 0;
    z-index: -1;
}
.container:hover .left-panel {
    left: -200px;
}

<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>

<

小提琴演示/strong>

相关文章：
没有找到相关文章