要素を追加すると幅が徐々に増えるのですか？

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

私はボタンをクリックしてください： 親要素の幅200pxの急激なり、ゆっくりと比べchild2の要素をスライド。

親要素の幅がスライドアウトと同じスピードで成長したい。どうやってするの？

Answer 1

.fadeに@keyframesを追加し、非表示にオーバーフローを設定します（そうしないと、テキストは元の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>