通过切换班级在高度之间转换？答案

【问题标题】：Transition between heights by toggling a class?通过切换班级在高度之间转换？
【发布时间】：2017-02-28 12:09:02
【问题描述】：

我想使用 css 和 jquery 为 div 设置动画以最大化和最小化它（增加高度 - 减少高度）。我有这个类，不是永久的唯一类是 kf-mini，当单击 div 时，这个类由 jquery 切换。当此动画最小化但不最大化时，我的问题就出现了。任何想法。 alguna 想法如何解决这个问题？

 $(".kf-child").on('click', function() {
        $(".kf-child").toggleClass("kf-mini");
      });

 .kf-cont {
      position: fixed;
      right: 50px;
      bottom: 0;
      background-color: rgb(61, 88, 152);
      width: 260px;
      height: 40px;
    }
    
    .kf-child{
      position: absolute;
      width: 90%;
      height:230px;
      background-color: rgba(38, 240, 125, .5);
      bottom: 0;
      right: 14px;
      transition: .3s ease;
    }
    
    .kf-mini{
      animation-name: transition;
        animation-duration: .3s;
        animation-fill-mode: forwards;
    }
    
    @keyframes transition {
      0% { height: 230px;}
      100% { height: 40px;}
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kf-cont">
      <div class="kf-child">  <!-- toggle the class kf-mini here. -->
    
      </div>
    </div>

【问题讨论】：

你能添加jQuery代码吗？会让这更容易理解......
@anied 有 JQuery，我之前没有添加，因为它是一个切换类，仅此而已。

标签： jquery css animation transition keyframe

【解决方案1】：

这是一个可以接受的解决方案吗？

$(".kf-child").on('click', function() {
    $(".kf-child").toggleClass("kf-mini");
  });

.kf-cont {
  position: fixed;
  right: 50px;
  bottom: 0;
  background-color: rgb(61, 88, 152);
  width: 260px;
  height: 40px;
}

.kf-child{
  position: absolute;
  width: 90%;
  height:230px;
  background-color: rgba(38, 240, 125, .5);
  bottom: 0;
  right: 14px;
  transition: height .3s ease;
}

.kf-mini{
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kf-cont">
  <div class="kf-child">  // <<-- toggle the class kf-mini here.

  </div>
</div>

【讨论】：