CSSでトランジションエフェクトを追加する方法

Question

私はonclickのときに、次のコードを使ってやわらかく穏やかなトランジション効果を作りました。トグル要素は非常に速くて難しく開きます。私は少し柔らかくしたいと思います。実際にクラスやID、セレクターが影響を与えるかどうかはわかりません。

デモ：jsfiddle

CSS：

.toggle-box + label:before { 
    background-color: #4F5150; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    color: #FFFFFF; 
    content: "+"; 
    display: block; 
    float: left; 
    font-weight: bold; 
    height: 20px; 
    line-height: 20px; 
    margin-right: 5px; 
    text-align: center; 
    width: 20px; 
} 

Answer 1

あなたは、このように次のルールを変更することができます：

.toggle-box + label + div { 
    max-height: 0; 
    margin-bottom: 10px; 
    transition: max-height 0.15s linear; 
    overflow: hidden; 
} 

.toggle-box:checked + label + div { 
    height: auto; 
    max-height: 1000px; 
    transition: max-height 3s linear; 
} 

最大高さが値にsettedする必要がありますあなたのdiv到達しません。ここで

更新されjsfiddle