0

I am using nganimate and have an animation in place on the max-height property of a div like so:

css

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

.sublist {
  max-height: 1300px;
  overflow: hidden;
  -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all;
  -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all;
  transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1) all;
}

html

<button ng-click="toggle=!toggle">{{toggle ? 'Hide' : 'Show'}} Items</button>
<div style="background-color:#fff; border: 1px black solid;" ng-show="toggle" class="sublist">
  <ul>
    <li ng-repeat="name in names">
      <a href="#"> {{name}} </a>
    </li> 
  </ul>
</div>

Working demo

I would like to know if there's any way for the height\max-height to be set based on the height of the child items inside the div I'm animating on using css alone?

Also, I notice there's a delay when clicking the button in the demo before the div hides. Is it possible to get the div to collapse as soon as the button is clicked?

mindparse
  • 6,115
  • 27
  • 90
  • 191
  • 1
    -webkit-transition: 0.1s ease-in all; -moz-transition: 0.1sase-in all; transition: 0.1s ease-in all; Changing the css should make the toggling effect faster.. – G_S Apr 12 '16 at 11:29

1 Answers1

1

I have tried your demo. By setting max-height auto works like a charm.

See below: https://plnkr.co/edit/dJLre1RYNRPafikxcuD3?p=preview

.sublist {
  max-height: auto;
  overflow: hidden;
  -webkit-transition: 0.5s ease-in all;
  -moz-transition: 0.5s ease-in all;
  transition: 0.5s ease-in all;
}
Raul Fernandez
  • 118
  • 7
  • True, didn't noticed it. – Raul Fernandez Apr 12 '16 at 11:37
  • Seems that it must be set to a pixel position for the transition to occur. http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css So either you go for the above approach, or b) you pre calculate the height before the transition happens. so rather than store the max-height on the sublist css class, you just define the transition over the max-height property, and you use $watch callback to handle it. Not a great solution though. – Raul Fernandez Apr 12 '16 at 11:45