CSS : 패널 몸체가 아래로 슬라이드되고 위로 움직입니다.

Question

패널이 있습니다. 패널 바디를 아래로 내려서 패널 헤더의 아이콘을 클릭하면 부드럽게 위로 움직여야합니다.

jquery를 사용할 수 없습니다. 나는 순수한 CSS3를 사용하여 그것을해야만한다.

처리 조건으로 각도 2를 사용하고 있습니다.

.slide_down_panel{ 
 
    -webkit-transition: all .2s ease-in; 
 
    -moz-transition: all .2s ease-in; 
 
    transition: all .2s ease-in; 
 
} 
 

 
.slide_up_panel{ 
 
    -webkit-transition: all .2s ease-in-out; 
 
    -moz-transition: all .2s ease-in-out; 
 
    transition: all .2s ease-in-out; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    
 
<div class="container"> 
 
    <h2>Basic Panel</h2> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading">Panel Header 
 
    <span (click)="showPanel = true;">{{showPanel ? '&#x2212;' : '&#x2b;'}}</span> 
 
    </div> 
 
    <div class="panel-body {{showPanel ? 'slide_down_panel' : 'slide_up_panel'}}" >A Basic Panel</div> 
 
    </div> 
 
</div>

어떤 도움도 좋은 것입니다.

감사합니다.

Answer 1

나는 애니메이션에 좋지 해요,하지만 당신이에서 시작할 수 있습니다

.slide_down_panel{ 
 
    -webkit-transition: all .2s ease-in; 
 
    -moz-transition: all .2s ease-in; 
 
    transition: all .2s ease-in; 
 
} 
 

 
.slide_up_panel{ 
 
    -webkit-transition: all .2s ease-in-out; 
 
    -moz-transition: all .2s ease-in-out; 
 
    transition: all .2s ease-in-out; 
 
} 
 
.panel{position: relative;} 
 
label{ 
 
position: absolute; 
 
top:0; 
 
left: 0; 
 
width: 100%; 
 
height: 40px; 
 
border: 1px solid red; 
 
} 
 
#checkBox, .panel-body{display:none;} 
 
#checkBox:checked ~ .panel-body{display:block}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    
 
<div class="container"> 
 
    <h2>Basic Panel</h2> 
 
    
 
    <div class="panel panel-default"> 
 
    <label for="checkBox"></label> 
 
    <input id="checkBox" type="checkbox"> 
 
    <div class="panel-heading">Panel Header 
 
    
 
    </div> 
 
    
 
    <div class="panel-body {{showPanel ? 'slide_down_panel' : 'slide_up_panel'}}" >A Basic Panel</div> 
 
    </div> 
 
</div>