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

Question

我正在尝试使用 ng-hide 和 ng-show 显示带有动画的 div，它无法正常工作。当我提到一个特定的高度时它工作正常，如果我提到最小高度它不工作。

这是我的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 具有更大的尺寸，则可以增加它，但同时也会增加过渡时间(您可以将不透明度分开从尺寸过渡过渡到使它们更兼容)

希望这对您有所帮助。