如何在添加元素時使寬度增長緩慢？

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：淡入淡出NG-動畫類。

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

當我點擊按鈕： 父元素寬度急劇地200像素，比慢慢滑出的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>