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

这是羽毛球：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 =文字+填充+边框

使用ng-hide CSS转换填充偏移高度

1 个答案: