我有下一个元素:
<button ng-click="showChild2 = !showChild2"
<div class="parent" flex>
<div class="child1">CHILD_1</div>
<div ng-if='showChild2' class="fade child2">CHILD_2</div>
</div>
CSS:fade是ng-animate class。
.child1 {width: 100px;}
.child2 {width: 100px;}
当我点击按钮时: 父元素宽度急剧变为200px,然后慢慢滑出child2元素。
我希望父元素宽度以与滑出相同的速度增长。怎么做?
答案 0 :(得分:2)
将@keyframes
添加到您的班级.fade
,并将溢出设置为隐藏(否则文本将溢出原始div)。
.child1 {width: 100px;}
.child2 {width: 100px; background-color: #F00; overflow:hidden}
.fade {animation: fadeIn 1s}
@keyframes fadeIn {
from {width: 0px;}
to {width: 100px;}
}
&#13;
<div class="parent">
<div class="child1">CHILD_1</div>
<div ng-if='showChild2' class="fade child2">CHILD_2</div>
</div>
&#13;