チェックボックスでトリガーされた折りたたみアニメーション

アニメーションで誰かが私を助けてくれるのだろうかと思っていました。私は隠されたチェックボックスによって引き起こされるdivを崩壊させました。チェックボックスはアニメートできますが、div自体はアニメーション化されません。私は複数のクラスでトランジションを設定しようとしましたが、運はないと私は認めます。私はCSSでは強くありません。何か案は？前もって感謝します！チェックボックスでトリガーされた折りたたみアニメーション

CSS：

body { 
    font-family: "Open Sans", "Sans-serif", Arial; 
    letter-spacing: 0.03em; 
    padding: 5px; 
    color: #435757; 
} 
div.main { 
    width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 

} 
div.content {  
    border-left: 3px solid; 
    border-color: #0066cc; 
    padding-left: 15px;  
    width: 95%; 
    margin-left: auto; 
    margin-right: auto; 
} 
div.labeltab { 
    border-radius: 10px; 
    background-color: rgba(255, 255, 255, 0.2); 
    margin-top: 15px; 
    margin-bottom: 15px; 
} 

.toggle-box { 
    display: none; 
} 
.toggle-box + label { 
    padding: 10px; 
    cursor: pointer; 
    display: block; 
    clear: both; 
    font-size: 21px; 
    margin-right: auto; 
    margin-bottom: 5px; 
    text-align: left; 
} 
.toggle-box + label:hover { 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 
} 
.toggle-box + label + div { 
    display: none; 
    margin-left: 0px; 
    margin-right: auto; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
} 
.toggle-box:checked + label { 
    color: #0066cc; 
    font-style: italic; 
} 
.toggle-box:checked + label + div { 
    display: block; 
    margin-right: auto; 
} 
.toggle-box + label:before { 
    content: ""; 
    display: block; 
    float: left; 
    font-size: 21px; 
    font-weight: 300; 
    border-right: 3px solid; 
    border-bottom: 3px solid; 
    width: 7px; 
    height: 7px; 
    transform: rotate(-45deg); 
    margin-top: 6px; 
    margin-right: 20px; 
    margin-left: auto; 
    text-align: left; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
} 
.toggle-box:checked + label:before { 
    content: ""; 
    color: #0066cc; 
    border-right: 3px solid; 
    border-bottom: 3px solid; 
    width: 7px; 
    height: 7px; 
    transform: rotate(45deg); 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
}

HTML：

<div class="LabelTab"><input class="toggle-box" id="identifier-8" name="grouped" type="checkbox"><label for="identifier-8"> Test 1</label> 
<div> 
<div class="content"> 
<h4>Content 1</h4> 
<p>Stuff</p> 
</div> 
</div> 
</div> 
<div class="LabelTab"><input class="toggle-box" id="identifier-6" name="grouped" type="checkbox"><label for="identifier-6">Test 2</label> 
<div> 
<div class="content"> 
<h4>Content 2</h4> 
<p>Stuff</p> 
</div> 
</div> 
</div>

出典

2017-10-03 TStone

アコーディオンのCSSも含むことができる：フォーカスを。例：focus＆：side by side https://codepen.io/gcyrillus/pen/dsvwF –

あなたはdisplayを移行することはできませんが、あなたが移行することができopacityとmax-height

body { 
 
    font-family: "Open Sans", "Sans-serif", Arial; 
 
    letter-spacing: 0.03em; 
 
    padding: 5px; 
 
    color: #435757; 
 
} 
 
div.main { 
 
    width: 1000px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
div.content { 
 
    border-left: 3px solid; 
 
    border-color: #0066cc; 
 
    padding-left: 15px; 
 
    width: 95%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
div.labeltab { 
 
    border-radius: 10px; 
 
    background-color: rgba(255, 255, 255, 0.2); 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.toggle-box { 
 
    display: none; 
 
} 
 
.toggle-box + label { 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    display: block; 
 
    clear: both; 
 
    font-size: 21px; 
 
    margin-right: auto; 
 
    margin-bottom: 5px; 
 
    text-align: left; 
 
} 
 
.toggle-box + label:hover { 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 
 
} 
 
.toggle-box + label + div { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    margin-left: 0px; 
 
    margin-right: auto; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
.toggle-box:checked + label { 
 
    color: #0066cc; 
 
    font-style: italic; 
 
} 
 
.toggle-box:checked + label + div { 
 
    max-height: 100px; 
 
    opacity: 1; 
 
    margin-right: auto; 
 
} 
 
.toggle-box + label:before { 
 
    content: ""; 
 
    display: block; 
 
    float: left; 
 
    font-size: 21px; 
 
    font-weight: 300; 
 
    border-right: 3px solid; 
 
    border-bottom: 3px solid; 
 
    width: 7px; 
 
    height: 7px; 
 
    transform: rotate(-45deg); 
 
    margin-top: 6px; 
 
    margin-right: 20px; 
 
    margin-left: auto; 
 
    text-align: left; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
.toggle-box:checked + label:before { 
 
    content: ""; 
 
    color: #0066cc; 
 
    border-right: 3px solid; 
 
    border-bottom: 3px solid; 
 
    width: 7px; 
 
    height: 7px; 
 
    transform: rotate(45deg); 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
}

<div class="LabelTab"><input class="toggle-box" id="identifier-8" name="grouped" type="checkbox"><label for="identifier-8"> Test 1</label> 
 
    <div> 
 
    <div class="content"> 
 
     <h4>Content 1</h4> 
 
     <p>Stuff</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="LabelTab"><input class="toggle-box" id="identifier-6" name="grouped" type="checkbox"><label for="identifier-6">Test 2</label> 
 
    <div> 
 
    <div class="content"> 
 
     <h4>Content 2</h4> 
 
     <p>Stuff</p> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-10-03 20:27:41

これはまさに私が外見の点で探していたものです、ありがとう！私は問題を抱えています。私のDivsは様々な高さです。 CSSがmax-height：0pxからmax-height：100pxのような固定パラメータを持つ場合にのみ、CSSはアニメーションを調整することができます。私がdivの100％をやろうとすると、現在のページの負荷で980pxのような100％またはウィンドウ領域が選択されます。私のdivsは1100から600に変わります。この制限を前提にして正しいのですか？それとも他の選択肢がありますか？ – TStone

@TStoneそれは正しいです、それはCSSのアプローチの限界です。各ボックスのおおよその高さを知る必要なしに動的に行うには、javascriptを使用する必要があります。 –

マイケルに感謝しました！ .toggle-box：checked + label + divでコンテンツ範囲内に最小高さと最大高さを設定しています。今私は複数の高さ、アニメーションの一致divがあります。ありがとう！

body { 
 
    font-family: "Open Sans", "Sans-serif", Arial; 
 
    letter-spacing: 0.03em; 
 
    padding: 5px; 
 
    color: #435757; 
 
} 
 
div.main { 
 
    width: 1000px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
div.content { 
 
    border-left: 3px solid; 
 
    border-color: #0066cc; 
 
    padding-left: 15px; 
 
    width: 95%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
div.labeltab { 
 
    border-radius: 10px; 
 
    background-color: rgba(255, 255, 255, 0.2); 
 
    margin-top: 15px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.toggle-box { 
 
    display: none; 
 
} 
 
.toggle-box + label { 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    display: block; 
 
    clear: both; 
 
    font-size: 21px; 
 
    margin-right: auto; 
 
    margin-bottom: 5px; 
 
    text-align: left; 
 
} 
 
.toggle-box + label:hover { 
 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); 
 
} 
 
.toggle-box + label + div { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    margin-left: 0px; 
 
    margin-right: auto; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
.toggle-box:checked + label { 
 
    color: #0066cc; 
 
    font-style: italic; 
 
} 
 
.toggle-box:checked + label + div { 
 
    min-height: 100px; 
 
    max-height: 1200px; 
 
    opacity: 1; 
 
    margin-right: auto; 
 
} 
 
.toggle-box + label:before { 
 
    content: ""; 
 
    display: block; 
 
    float: left; 
 
    font-size: 21px; 
 
    font-weight: 300; 
 
    border-right: 3px solid; 
 
    border-bottom: 3px solid; 
 
    width: 7px; 
 
    height: 7px; 
 
    transform: rotate(-45deg); 
 
    margin-top: 6px; 
 
    margin-right: 20px; 
 
    margin-left: auto; 
 
    text-align: left; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
} 
 
.toggle-box:checked + label:before { 
 
    content: ""; 
 
    color: #0066cc; 
 
    border-right: 3px solid; 
 
    border-bottom: 3px solid; 
 
    width: 7px; 
 
    height: 7px; 
 
    transform: rotate(45deg); 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 
}

<div class="LabelTab"><input class="toggle-box" id="identifier-8" name="grouped" type="checkbox"><label for="identifier-8"> Test 1</label> 
 
    <div> 
 
    <div class="content"> 
 
     <h4>Content 1</h4> 
 
     <p>Stuff</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="LabelTab"><input class="toggle-box" id="identifier-6" name="grouped" type="checkbox"><label for="identifier-6">Test 2</label> 
 
    <div> 
 
    <div class="content"> 
 
     <h4>Content 2</h4> 
 
     <p>Stuff</p> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-10-04 18:55:30 TStone

チェックボックスでトリガーされた折りたたみアニメーション

答えて

関連する問題