我正在尝试使用 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;
}
最佳答案
所以,我设法获得了我认为你想要的东西,除了大小过渡不一定与不透明度过渡同步,但无论哪种方式看起来都不错。
想法是使用最大宽度和缓入缓出过渡。
.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 具有更大的尺寸,则可以增加它,但同时也会增加过渡时间(您可以将不透明度分开从尺寸过渡过渡到使它们更兼容)
希望这对您有所帮助。
关于javascript - 如何为 ng-hide 和 ng-show 动画设置动态高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41195939/