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

时间:2015-05-12 02:39:25

标签: css angularjs css-transitions padding ng-animate

当元素在其上填充时,我遇到了高度属性的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,但这打破了动画。任何人都可以帮我这个吗?

1 个答案:

答案 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 =文字+填充+边框