CSSの遷移親div内の子divの幅

Question

CSSを使用して、親divの中に（ゆっくりと）子divをピクセル数から別の数に5秒間広げようとしています。それは可能でしょう、そうですか？私がそれをやろうとしている方法はうまくいかない。

#parent { 
 
    background: black; 
 
    height: 10px; 
 
    width: 300px; 
 
    z-index: 1; 
 
} 
 

 
#child{ 
 
    background: white; 
 
    z-index: 2; 
 
    height: 10px; 
 
    width: 10px; 
 
    transition: width 5s ease-out; 
 
} 
 
    
 
#parent:active #child{ 
 
    max-width: 290px; 
 
    transition: max-width 5s ease-in; 
 
}

<div id='parent'> 
 
    <div id='child'></div> 
 
</div>

Answer 1

あなたは、アクティブな状態にwidthかmax-widthを変更するために選ぶことができるので、移行に変更したいものを指定することができます。あなたのコードでは、固定widthを定義し、次にmax-widthを変更していますが、幅は変わらないので何もしません。

#parent { 
 
    background: black; 
 
    height: 10px; 
 
    width: 300px; 
 
    z-index: 1; 
 
} 
 

 
#child{ 
 
    background: white; 
 
    z-index: 2; 
 
    height: 10px; 
 
    max-width: 10px; 
 
    transition: max-width 5s ease-out; 
 
} 
 
    
 
#parent:active #child{ 
 
    max-width: 290px; 
 
}

<div id='parent'> 
 
    <div id='child'></div> 
 
</div>