填充NG-HIDE CSS过渡的高度

Question

我在元素上有填充时的CSS过渡时有问题。

.content {
  padding: 10px;
  border:1px solid black;
  overflow: hidden;
  -webkit-transition: all linear 1s;
  transition: all linear 1s;
  height: 16px;
}
.content.ng-hide-add { height: 16px; }
.content.ng-hide-add.ng-hide-add-active { height: 0px; }
.content.ng-hide-remove { height: 0px; }
.content.ng-hide-remove.ng-hide-remove-active { height: 16px; }

这是plunker：http：//plnkr.co/edit/pbyauht8w6zvzktr7etr？p = preview

您可以看到，动画仍然覆盖16px，但总共被填充了20px。如果将填充更改为0，则动画会按预期工作，例如此plunker：http：//plnkr.co/edit/50zfnnaoopx7hgl2tryi？p = preview

我尝试使用box-sizing:border-box，但这打破了动画。谁能帮助我？

Answer 1

您可以：

1）在动画中更改填充顶（文本将更改其位置）

.content.ng-hide-add.ng-hide-add-active { height: 0px; padding: 0px 10px;}
.content.ng-hide-remove { height: 0px; padding: 0px 10px;}

2）将您的内容放入容器中：

html：

<div ng-hide="!show" class="container">
  <div class="content">Look at my lovely content</div>
</div>

CSS：

.container {
  border:1px solid black;
  overflow: hidden;
  -webkit-transition: all linear 1s;
  transition: all linear 1s;
}
.content {
  padding: 10px;
}
.container.ng-hide-add { height: 38px;}
.container.ng-hide-add.ng-hide-add-active { height: 0px; }
.container.ng-hide-remove { height: 0px; }
.container.ng-hide-remove.ng-hide-remove-active { height: 38px; }

38px =文本 填充 边框