通过切换 class 在高度之间转换？

Question

我想用 css 和 jquery 设置 div 的动画以最大化和最小化它（增加高度 - 减小高度）。我有这个 classes，唯一的不是永久性的 class 是 kf-mini，当 div 被点击时，这个 class 被 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>

Answer 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>

通过切换 class 在高度之间转换？

Transition between heights by toggling a class?

css

jquery

animation

transition

keyframe