Question

在“隐藏”时，我想在某些div上缩小（将高度降低到0px），这些div的高度另外由其内容的高度决定。

此代码有效，但转换仅适用于填充和边框，而不适用于高度，这是垂直尺寸的大部分，因此结果不平滑。

<div class="cont">
  <div class="msg" ng-hide="showIt">
    <div class="icon"><img src="img1.jpg" /></div>
    <div class="text">Some text 1</div>
  </div>
  <div class="msg" ng-hide="showIt">
    <div class="icon"><img src="img2.jpg" /></div>
    <div class="text">Some text 2</div>
  </div>
</div>

和CSS

.cont {
  position: fixed;
  bottom: 0px;
  left: 5px;
  right: 5px;
}

.msg {
  border: 1px solid grey;
  background-color: #eee;
  padding: 10px;
  overflow: hidden;
/*  height:50px; THIS MAKES IT WORK, BUT I DON'T WANT TO FIX HEIGHT */
}

.msg img {  
  float: left;
  margin-right: 10px;
  height: 30px;
}

.msg .text {
  overflow:hidden;
  font-size: 13px;
  text-align: center;
}

.msg.ng-hide-add {
  transition: all 2s ease-in-out; 
  -moz-transition: all 2s ease-in-out; 
  -o-transition: all 2s ease-in-out; 
  -webkit-transition: all 2s ease-in-out; 
}

.msg.ng-hide {
  height: 0; /* TRANSITION TO 0 ISN'T SMOOTH UNLESS INITIAL HEIGHT OF .msg IS SPECIFIED */
  padding-top: 0;
  padding-bottom: 0;
  border: 0;
}

我正在使用AngularJS ngAnimate，但这与问题无关。 Angular只在必要时添加ng-hide类。

进一步要求：

尽可能使用纯CSS解决方案
没有固定的高度，如.msg注释掉的部分。虽然这有效，但这意味着我不能通过内容动态设置高度
没有动态生成的高度样式（例如，通过使用jQuery计算并在每个.msg上显式设置高度样式）
没有设置每个内容元素的转换样式（例如.msg.ng-hide img { height: 0; }）。我可以使这个工作，但每个.msg的内容是动态的，所以每次我介绍更多/不同的子元素时，我必须为每个元素添加过渡样式。比缩小父母要好得多。

Answer 1

有一个技巧。而不是使用height属性。您可以使用max-height

来实现

.msg {
    max-height: 1000px; /* depend on the largest possible */
    ...
}

.msg.ng-hide {
    max-height: 0;
    ....
}

CSS过渡：div的收缩高度，其高度由其内容决定

1 个答案: