最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how to set a dynamic height for ng-hide and ng-show animations - Stack Overflow

programmeradmin4浏览0评论

I am trying to show a div with animation using ng-hide and ng-show, it is not working properly. When I mention a specific height it is working correctly, if I mention min-height it is not working.

here is my css code

.sample-show-hide {
  opacity: 1;
  min-height: 180px;
}

.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.sample-show-hide.ng-hide {
  min-height: 0px;
  opacity: 0;
}

here is my example html code

<div class="row" ng-click="showDiv=true">
<h2>Click me</h2>
</div>

<div class="row sample-show-hide" ng-show="showDiv=!showDiv">
<h2>some data</h2>
<h2>some data</h2>
<h2>some data</h2>
<h2>some data</h2>
</div>

If I mention a specific height like below it is working correctly, then if I add some more extra data to that div then it is taking the height as 80px only the remaining data is not showing because of that specific height, so if I add extra text also that div has to take height automatically

.sample-show-hide {
      opacity: 1;
      height: 80px;
    }

    .sample-show-hide.ng-hide-add,
    .sample-show-hide.ng-hide-remove {
      transition: all linear 0.5s;
    }

    .sample-show-hide.ng-hide {
      height: 0px;
      opacity: 0;
    }

I am trying to show a div with animation using ng-hide and ng-show, it is not working properly. When I mention a specific height it is working correctly, if I mention min-height it is not working.

here is my css code

.sample-show-hide {
  opacity: 1;
  min-height: 180px;
}

.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.sample-show-hide.ng-hide {
  min-height: 0px;
  opacity: 0;
}

here is my example html code

<div class="row" ng-click="showDiv=true">
<h2>Click me</h2>
</div>

<div class="row sample-show-hide" ng-show="showDiv=!showDiv">
<h2>some data</h2>
<h2>some data</h2>
<h2>some data</h2>
<h2>some data</h2>
</div>

If I mention a specific height like below it is working correctly, then if I add some more extra data to that div then it is taking the height as 80px only the remaining data is not showing because of that specific height, so if I add extra text also that div has to take height automatically

.sample-show-hide {
      opacity: 1;
      height: 80px;
    }

    .sample-show-hide.ng-hide-add,
    .sample-show-hide.ng-hide-remove {
      transition: all linear 0.5s;
    }

    .sample-show-hide.ng-hide {
      height: 0px;
      opacity: 0;
    }
Share Improve this question edited Dec 17, 2016 at 6:41 Mini Bhati 3435 silver badges20 bronze badges asked Dec 17, 2016 at 6:21 MidhunsaiMidhunsai 4278 silver badges27 bronze badges 2
  • what version of angularjs are you using? – Ovidiu Dolha Commented Dec 19, 2016 at 11:39
  • version 1.5.8 @Ovidiu Dolha – Midhunsai Commented Dec 19, 2016 at 11:47
Add a ment  | 

3 Answers 3

Reset to default 4 +50

So, I managed to obtain what I think you want, except that the size transition is not necessarily in sync with the opacity transition, but looks good either way.

The idea is to use max-width and the ease-in and ease-out transitions.

.sample-show-hide {
  max-height: 999px;
  opacity: 1;
}

.sample-show-hide.ng-hide-add {
  transition: all ease-out 0.5s;
}

.sample-show-hide.ng-hide-remove {
  transition: all ease-in 0.5s;
}

.sample-show-hide.ng-hide {
  max-height: 0px;
  opacity: 0;
}

NOTE that the speed of the size depends on the max-height that you set (e.g. 999px) - you can increase this if you expect the div to have bigger size but then also increase the transition time (you could separate the opacity transition from the size transition to make them more patible)

Hope this helps.

Seems to work fine, I made a jsfiddle for it just in case. I added one extra line though, to be sure.

min-height: 80px;
height: auto;

It works in my example https://jsfiddle/c6xnv0pj/2/, maybe I'm missing something?

Maybe you didn't inject ngAnimate to your app?

angular.module('myApp', ['ngAnimate']);
发布评论

评论列表(0)

  1. 暂无评论