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

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

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

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

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

Answer 1

将@keyframes添加到您的班级.fade，并将溢出设置为隐藏（否则文本将溢出原始div）。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;