확인란으로 트리거되는 접을 수있는 애니메이션

누군가 내가 애니메이션을 도울 수 있는지 궁금합니다. 숨겨진 체크 상자로 인해 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 & : 나란히 체크 됨 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

이것은 정확히 외관면에서 볼 때, 감사합니다! 나는 문제가있다. 내 사업부는 다양한 높이가 있습니다. CSS는 max-height : 0px에서 max-height : 100px와 같은 고정 매개 변수가있는 경우에만 애니메이션을 계산할 수있는 것처럼 보입니다. div의 100 %를 수행하려고하면 980px와 같은 현재 페이지로드에서 100 % 또는 창 영역을 선택합니다. 내 div는 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

확인란으로 트리거되는 접을 수있는 애니메이션

답변

관련 문제