html - CSS : Panel body slide down and slide up

Question

我有面板。我希望面板主体在单击面板标题的加号图标时向下滑动和向上滑动。

我不会使用 jquery。我必须使用纯 CSS3 来完成。

我正在使用 Angular 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>