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

所以，我设法获得了我想要的东西，除了尺寸转换不一定与不透明度转换同步，但无论哪种方式看起来都很好。

我们的想法是使用最大宽度以及缓入和缓出过渡。

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

请注意，大小的速度取决于您设置的最大高度（例如999px） - 如果您希望div具有更大的尺寸但是也可以增加过渡时间（可以将不透明度分开），则可以增加此值从大小过渡过渡到使它们更兼容）

希望这有帮助。

Answer 2

似乎工作正常，为了以防万一，我为它做了一个jsfiddle。我确实增加了一条线。

min-height: 80px;
height: auto;

Answer 3

它适用于我的例子https://jsfiddle.net/c6xnv0pj/2/，也许我错过了什么？

也许你没有将ngAnimate注入你的应用程序？

angular.module('myApp', ['ngAnimate']);

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

这是我的css代码

这是我的示例html代码

3 个答案: