如何制作平滑的开口块？ （在 js 上）

Question

I have a container with images and a "load more" button to add more images. It works, but I want to make a smooth opening from top to bottom, but I fail. I added 'opacity' to see it works, but still, 'transition' doesn't happen. I looked at other people's examples, where the code works using the height of the container, but I add the number of images, I want to add 6 images and smoothly. How can do this correctly?

 let data = Array.from(document.querySelectorAll('.block.item')), step = 6, item = 0; data.slice(step).forEach(e => e.style.display = 'none'); item += step; document.querySelector('#load').addEventListener('click', function(e){ let tmp = data.slice(item, item + step); tmp.forEach(e => e.style.display = 'block'); item += step; let animation = document.querySelector('.block'); animation.classList.add('fade'); if(tmp.length < 6){ this.remove(); } });

 .block { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; width: 80%; margin: auto; }.item { background-color: #6ab7eb; border: 1px solid black; flex: 0 1 25%; width: 50px; height: 50px; } #load { background-color: white; }.block.fade { -webkit-transition: height.5s ease; -o-transition: height.5s ease; transition: height.5s ease; opacity: 0.5; }

 <div class="block"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <button id="load">Load more</button>

Answer 1

here is a snippet it may help you:

 $(document).ready(function () { size_li = $(".block.item").size(); x=0; $('.block li:lt('+x+')').addClass('show'); $('#loadMore').click(function () { x= (x+5 <= size_li)? x+6: size_li; $('.block.item:lt('+x+')').addClass('show'); }); $('#showLess').click(function () { x=(x-5<0)? 3: x-5; $('#myList li').not(':lt('+x+')').removeClass('show'); }); });

 .block{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; width: 80%; margin: auto; }.item{ background-color: #6ab7eb; border: 1px solid black; flex: 0 1 25%; width: 50px; height: 50px; opacity: 0; transition: all 0.4s ease; overflow: hidden; }.block.item{ height: 0; opacity: 0; transition: all 0.4s ease; overflow: hidden; }.block.item.show { height: 18px; opacity: 1; } #loadMore { color:green; cursor:pointer; } #loadMore:hover { color:black; } #showLess { color:red; cursor:pointer; } #showLess:hover { color:black; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="block"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div id="loadMore">Load more</div>