单击 div 时，如何使用动画或其他方式轻轻改变它的大小

Question

我只是想稍微改变 div 的大小。当我单击 div 时，我可以展开和折叠那些 h5 元素但是我该如何调整这个动作的动画呢？我已经尝试应用关键帧动画或 css 过渡，但我失败了

for (var i = 1; i <= 5; i++) {
  $('#sampleNumberList').append('<h5>#' + i + '</h5>');
}
$('#topSampleNum').on('click', function() {
  if ($('#sampleNumberList').hasClass('active') === true) {
    $('#sampleNumberList').removeClass('active');
  } else {
    $('#sampleNumberList').addClass('active');
  }
});

.topFloatBar {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 5;
  text-align: center;
  background-color: #e3e3e3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#sampleNumberList {
  max-height: 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topFloatBar" id="topSampleNum">
  <h2 id="mainNumber"> #1 </h2>
  <div id="sampleNumberList"> </div>
</div>

Answer 1

像这样？

var sampleList = document.querySelector('#sampleNumberList');
var listTrigger = document.querySelector('#mainNumber');

for(var i=1; i<=10; i++){
  let el = document.createElement('h5');
  el.innerText = i;
  sampleList.append(el);
}

listTrigger.addEventListener('click', ()=> {sampleList.classList.toggle('active');});

.topFloatBar{
    position:fixed;
    width:100%;
    top: 0;
    z-index:5;
    text-align:center;
    background-color: #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor:pointer;
  }

    #sampleNumberList {
    position: absolute;
    width: 100%;
    overflow:hidden;
    height: auto;
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
    transform-origin: top;
  }

.active{transform: scale(1) !important;}

<div class="topFloatBar" id="topSampleNum" >
    <h2 id="mainNumber">#1</h2>
    <div id="sampleNumberList"></div>
</div>

Answer 2

使用 jQuery slideToggle() 平滑地切换那些 h5。

查看演示：JSFiddle

$('#clickableDiv').click(function() {
  $('h5').slideToggle();
});

#sampleNumberList>h5 {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div style='background:red'>
  <h2 id='mainNumber'> #1 </h2>
  <div id='clickableDiv' style='background:yellow'> Click Me </div>
  <div id='sampleNumberList' style='background:blue'>
    <h5> #1 </h5>
    <h5> #2 </h5>
    <h5> #3 </h5>
  </div>
</div>

单击 div 时，如何使用动画或其他方式轻轻改变它的大小

how to change gently div's size by using animation or something, when it's clicked

javascript

css

jquery

effect

dropdown