0

Using angular js and bootstrap - And the on-hover when the div's height is increasing, transition ease is not working.

<div class="sidebar-list-item customHeight"><a ui-sref-active="active" ui-sref="home.dashboard.usermaster" class="sidebar-link text-muted"><span>Products</span></a>
      <ul class="sidebar-menu list-unstyled border-left border-primary border-thick">
        <li ng-repeat="product in prod" class="sidebar-list-item"><a ng-click="ctrl.getProduct(product)" class="sidebar-link text-muted pl-lg-3">{{product}}</a></li>
      </ul>
    </div>

customHeight class

.customHeight {
  overflow: hidden;
  height: 52px;
  transition: height .5s ease-in-out 0.5s;
}
.customHeight:hover {
  overflow: hidden;
  height: auto;
}

Transition ease is not working with height: auto.

Adarsh Singh
  • 208
  • 1
  • 3
  • 17
  • Im aware the linked question is about `height:0` => `height:auto` but its the very same problem youre facing with `height:52px` => `height:auto` – Fabian S. Mar 22 '19 at 06:56
  • < transition: height .5s ease-in-out 0.5s > this line in css is not working. – Adarsh Singh Mar 22 '19 at 07:08
  • 1
    Please refer to the possible duplicate i linked, a solution is described there. TL;DR: you cant transition to non-absolute values like `height:auto` using css only. – Fabian S. Mar 22 '19 at 07:11
  • Yes you are right transition ease is not working on height:auto. Give some solution for that as I am using ng-repeat to display the list so the height varies with the list size. So I can't keep the height as static. – Adarsh Singh Mar 22 '19 at 07:19
  • As i already stated twice, please refer to the possible duplicate question that i linked in my first comment. A proper answer to your question (for css only) is provided there. – Fabian S. Mar 22 '19 at 07:35
  • Ya ! I saw that, it resolved my issue. shall I delete the question?? – Adarsh Singh Mar 22 '19 at 09:17
  • No, its now officially markes as duplicate, so everybody who finds your question does find the proper solution. No need to delete the question at all. – Fabian S. Mar 22 '19 at 10:03

0 Answers0