как аккуратно изменить размер div с помощью анимации или чего-то еще, когда он нажимается - PullRequest
Новая
       19

как аккуратно изменить размер div с помощью анимации или чего-то еще, когда он нажимается

0 голосов
/ 03 июня 2018

Я просто пытаюсь мягко изменить размер 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>

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Используйте 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>
0 голосов
/ 03 июня 2018

Как это? 

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