当元素在其上填充时,我遇到了高度属性的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
,但这打破了动画。任何人都可以帮我这个吗?
答案 0 :(得分:0)
你可以:
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 =文字+填充+边框