クラスを切り替えることによって高さの遷移ができますか？

Question

divをアニメーション化して、cssとjqueryで最大化と最小化（高さの増加 - 高さの減少）したいと考えています。私はこのクラスを持っています。永続的ではないユニークなクラスはkf-miniです。このクラスは、divがクリックされたときにjqueryによってトグルされます。私の問題は、このアニメーションが最小限に抑えられるが最大限にはならないときに来る。何か案が。アルグナの考え方これを解決する方法？

$(".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>