Question

我正在研究子广播动画功能的一些问题。我的代码有效，但由于最大高度与CSS3过渡无关，因此动画中存在一些抖动。

代码如下，您可以自己查看我所描述的内容。无论如何，我可以软化动画的缓和效果吗？

＆＃13;

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

＆＃13;

/* ====================
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;
  }
}

＆＃13;

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

＆＃13;

JSFIDDLE VERSION

Answer 1

添加最小高度和最大高度为我修复

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

使用填充/高度转换时的抖动动画

1 个答案: