css 折叠版动画

Question

我想做一个折叠板效果的div，比如element这个collapse，不用用jQuery

element

现在我已经能够做到展开动画，却不知道怎么做收拢动画

 <div>
    <div>开关</div>  
    <div class="collapse-content-box"></div>
 </div>   
 @keyframes myfirst
  {
    0%   {height: 0px}
    100% {height: 150px}
  }

  .collapse-content-box {
    overflow: hidden;
    animation: myfirst 1s alternate;
    animation-fill-mode : forwards;
    animation-direction: alternate;
  }

当展开当时候，内容div使用了如上当myfirst展开动画，请问如何在展开后，点击开关，给他加上一个收拢动画

Answer 1

用到jq库吗？有一个动画叫做fadeIn跟fadeOut的方法，用来淡入淡出，然后加fadeToggle的效果会好点

Answer 2

可以把打开收拢的动画单独放在一个类里面，然后控制类的增减就可以了

Answer 3

个人认为css好像不可以。看了下你提供的element，里面引用了两套js

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.2/lib/index.js"></script>

估计还是要js来实现。

element js里应该有：el-collapse 相关的东西。可以查看一下。

Answer 4

不想用jquery就用原生的js吧，给隐藏的内容加个class类；点击按钮的时候if判断一下是否有那个类；来操作就可以。

Answer 5

把我写的复制进去看一下就知道怎么写了。

@keyframes myfirst
  {
    0%   {height: 0px}
    100% {height: 150px}
  }
   @keyframes mySec
  {
    0%   {height: 150px}
    100% {height: 0}
  }
  .collapse-content-box {
    overflow: hidden;
    width: 150px;
    height: 0;
    animation: mySec 1s alternate;
    animation-fill-mode : forwards;
    animation-direction: alternate;
  }
  .act + .collapse-content-box{
    animation: myfirst 1s alternate;
  }

<div>
    <div id="btn" class="btn">开关</div>  
    <div class="collapse-content-box">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
 </div>   

<script type="text/javascript">
      var btn = document.getElementById('btn');
      (function(){
        var mark = true;
        btn.onclick = function(){
          if(mark){
            this.classList.add("act");
            mark = false;
          }else{
            this.classList.remove("act");
            mark = true;
          }
        }
      })()
    </script>

Answer 6

可以用css做选项卡的思路，折叠板有一个 <input type="checkbox">，设宽高和折叠板一样大且opacity: 0，并且z-index要比点击的折叠板高,点击了折叠板，就使checkbox选中了，用class :checked + div{display：block}控制div显示，再次点击checkbox取消，:checked + div{ display：block}失效 div隐藏