Transition entre les hauteurs en faisant basculer une classe?

Question

Je veux animer un div pour le maximiser et le minimiser (augmenter la hauteur - diminuer la hauteur) avec css et jquery. J'ai cette classe, la classe unique qui n'est pas permanente est le kf-mini, cette classe est basculée par jquery quand on clique sur la div. Mon problème vient quand cette animation fonctionne pour minimiser mais pas pour maximiser. Une idée. alguna idée comment résoudre ce problème?

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

Serait-ce une solution acceptable?

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