パディング/高さでトランジションを使用したときの不安定なアニメーション

Question

私が取り組んでいるサブラジオアニメーション機能に問題があります。私はコードを動作させていますが、アニメーションにはCSS3トランジションで意図した最大高さが働かないためにジッタがいくつかあります。

コードは次のとおりです。あなたが私が何を記述しているかについては、自分で確認できます。とにかく私はアニメーションのイージングを和らげることができますか？

$(function() { 
 
\t /*-- Display/Remove secondary radio selection if the second option is checked/unchecked --*/ 
 
    $('input[type="radio"]').click(function() { 
 
    if ($('#selection2').is(':checked')) { 
 
    \t window.setTimeout(function(){ 
 
    \t \t $('#subsection1').addClass('display-subsection'); 
 
     }, 200); 
 
    } 
 
    /*-- If radio is not selected anymore, remove sub-sections checked also --*/ 
 
    if ($('#selection2').is(":not(:checked)")) { 
 
    \t $('input[name=request-subsection1]').removeAttr('checked'); 
 
    \t $('#subsection1').removeClass('display-subsection'); 
 
    } 
 
    }); 
 
    
 
    /*-- Display/Remove another secondary radio selection if the third option is checked/unchecked --*/ 
 
    $('input[type="radio"]').click(function() { 
 
    if ($('#selection3').is(':checked')) { 
 
    \t window.setTimeout(function(){ 
 
    \t \t $('#subsection2').addClass('display-subsection'); 
 
     }, 200); 
 
    } 
 
    /*-- If radio is not selected anymore, remove sub-sections checked also --*/ 
 
    if ($('#selection3').is(":not(:checked)")) { 
 
    \t $('input[name=request-subsection2]').removeAttr('checked'); 
 
     \t $('#subsection2').removeClass('display-subsection'); 
 
    } 
 
    }); 
 
});

/* ==================== 
 
Styling 
 
==================== */ 
 
/*-- Boilerplate CSS --*/ 
 
.__hero-container { 
 
    position: relative; 
 
} 
 

 
.container { 
 
    background-color: #dadada; 
 
    padding-top: 5%; 
 
    padding-bottom: 5%; 
 
} 
 

 
label { 
 
    display: block; 
 
} 
 

 
label:hover { 
 
    cursor: pointer; 
 
} 
 

 
/*-- Custom Contact form --*/ 
 
#custom-subforms { 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 

 
.hidden-subsection { 
 
    clear: both; 
 
    opacity: 0; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    -webkit-transition: all 0.2s ease-in-out; 
 
    -moz-transition: all 0.2s ease-in-out; 
 
    -o-transition: all 0.2s ease-in-out; 
 
    transition: all 0.2s ease-in-out; 
 
} 
 

 
.display-subsection { 
 
    opacity: 1; 
 
    max-height: 100%; 
 
    padding-top: 30px; 
 
} 
 

 
/*-- Replace radio buttons --*/ 
 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"] + label span { 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 0 auto; 
 
    vertical-align:middle; 
 
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat; 
 
    cursor:pointer; 
 
} 
 

 
input[type="radio"]:checked + label span { 
 
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -57px top no-repeat; 
 
} 
 

 
/* ==================== 
 
Breakpoints 
 
==================== */ 
 
@media only screen and (max-width : 480px) { 
 
    .container { 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<div class="__hero-container"> 
 
    <div class="container" id="custom-subforms"> 
 
    
 
    <form> 
 
     <div class="col-md-12 text-center"> 
 
     
 
     <div class="col-md-4 col-sm-4 col-xs-4"> 
 
      <input type="radio" id="selection1" name="request"> 
 
      <label for="selection1"><span></span>Selection 1</label> 
 
     </div> 
 
     <div class="col-md-4 col-sm-4 col-xs-4"> 
 
      <input type="radio" id="selection2" name="request"> 
 
      <label for="selection2"><span></span>Selection 2</label> 
 
     </div> 
 
     <div class="col-md-4 col-sm-4 col-xs-4"> 
 
      <input type="radio" id="selection3" name="request"> 
 
      <label for="selection3"><span></span>Selection 3</label> 
 
     </div> 
 

 
     <div class="hidden-subsection" id="subsection1"> 
 
      <div class="col-md-6 col-sm-6 col-xs-6"> 
 
      <input type="radio" id="selection4" name="request-subsection1"> 
 
      <label for="selection4"><span></span>Selection 4</label> 
 
      </div> 
 
      <div class="col-md-6 col-sm-6 col-xs-6"> 
 
      <input type="radio" id="selection5" name="request-subsection1"> 
 
      <label for="selection5"><span></span>Selection 5</label> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="hidden-subsection" id="subsection2"> 
 
      <div class="col-md-6 col-sm-6 col-xs-6"> 
 
      <input type="radio" id="selection6" name="request-subsection2"> 
 
      <label for="selection6"><span></span>Selection 6</label> 
 
      </div> 
 
      <div class="col-md-6 col-sm-6 col-xs-6"> 
 
      <input type="radio" id="selection7" name="request-subsection2"> 
 
      <label for="selection7"><span></span>Selection 7</label> 
 
      </div> 
 
     </div> 
 
     
 
     </div> 
 
    </form> 
 
    
 
    </div> 
 
</div>

JSFIDDLE VERSION

Answer 1

分の高さおよび最大高さが私

.display-subsection { 
    opacity: 1; 
    min-height: 10px; 
    max-height: 100px; 
}