CODEWITHSUNDEEP
csscss-transitionscss-animations
poshest
poshest

Reputation: 4237

CSS transtitions: Shrink height of div whose height is determined by its content

Upon "Hide", I want to shrink (reduce height to 0px) on some divs whose height is otherwise determined by the height of their content.

This code sort of works, but the transitions only work on padding and border, not on height, which is the bulk of the vertical size, so the result isn't smooth.

Plunker

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

and 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;
}

I'm using AngularJS ngAnimate, but that's not relevant to the question. Angular simply adds the ng-hide classes when necessary.

Further requirements:

Upvotes: 2

Views: 2148

Answers (1)

Linh Pham
Linh Pham

Reputation: 3025

there is a trick for it. Instead of using height property. You can achive by using max-height

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

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

Upvotes: 3

Related Questions