css - 添加元素时如何使宽度缓慢增长？

Question

我有下一个元素:

 <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 类。

.child1 {width: 100px;}
.child2 {width: 100px;}

当我点击按钮时:父元素宽度急剧变为200px，然后慢慢滑出child2元素。

我希望父元素宽度的增长速度与滑出速度相同。怎么做？

Answer 1

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

<div class="parent">
   <div class="child1">CHILD_1</div>
   <div ng-if='showChild2' class="fade child2">CHILD_2</div>   
</div>