Question

我希望使用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>

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>

切换课程之间的高度转换？

1 个答案: