如何为ng-hide和ng-show动画设置动态高度

Question

我试图表现出div使用动画ng-hide和ng-show,它不能正常工作.当我提到一个特定的高度它正常工作,如果我提到最小高度它不工作.

这是我的css代码

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

这是我的示例html代码

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

如果我提到一个特定的高度,如下所示它正常工作,那么如果我向该div添加一些额外的数据,那么它的高度为80px,只有剩余的数据没有显示因为特定的高度,所以如果我添加额外的文本也表示div必须自动取高度

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

Answer 1

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

Hope this helps.