Question

我有 div缩小到0 ，此时一切都很好。 一旦它们的大小达到0以上，它们占用了整个空间 - 当它们像0.0001时更是已经占据了它们在动画结束时所需的全部空间（仅需10秒）用于演示目的）

任何人都可以让theese divs只占用他们实际做的空间，或者至少当其他div没有加载时他们应该创建一个可滚动的空白区域。就像我想要包含div逐渐调整大小/增长与其中的内容，如果我有3个div它将是任何正常的html元素将有3个这些div在里面时的大小。并且随着越来越多我希望它能够成长。

请不要jquery

注意动画开始后如何立即滚动

var items = document.querySelectorAll(".item")
      , t = 0;
    items.forEach(function (i) {
      i.style.animationDelay = t + "s";
      t = t + 2;
    });
    var imgs = [];
    items.forEach(function (itm) {
      let image = itm.children[0]
      image.src = image.getAttribute('lazy-src');
      image.onload = () => {
        image.style.opacity = "1";
      };
    });

body {
    background: #212121;
}
.list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    transform: scale(0);
    width: 150px;
    height: 210px;
    margin: 1%;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.8);
    background: #191919;
    cursor: pointer;
    border-radius: 2px;
    animation: 10s loadInItems ease forwards;
}
.item img {
    height: 100%;
    width: 100%;
    border-radius: 2px;
    transition: opacity 1s ease;
    opacity: 0;
}
@keyframes loadInItems {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div class="list">
         <div class="item"> <img lazy-src="https://upload.wikimedia.org/wikipedia/en/5/5c/Endgame-movie-cover.jpg"> </div>
         <div class="item"> <img lazy-src="https://upload.wikimedia.org/wikipedia/en/7/72/Unstoppable_dvd_movie_cover_snipes.jpg"> </div>
         <div class="item"> <img lazy-src="http://cdn4.hiphoplead.com/static/2008/02/street-kings.jpg"> </div>
         <div class="item"> <img lazy-src="https://www.cinematerial.com/media/posters/md/hh/hhy018qz.jpg?v=1462117460"> </div>
         <div class="item"> <img lazy-src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6M7momC3yKVexsaIyT4EjIals6x7d5Z_h3bF5gwxyPiAyzpVk"> </div>
         <div class="item"> <img lazy-src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSzmuhqg42zthBrJ0kZoP887ZrTIW3eu2llBSCs3etXqMIG9gT-w"> </div>
         <div class="item"> <img lazy-src="https://upload.wikimedia.org/wikipedia/en/c/c5/Sniper-3-movie-cover-1.jpg"> </div>
         <div class="item"> <img lazy-src="http://waytooindie.com/wp-content/uploads/2015/09/jurassic-park-movie-cover.jpg"> </div>
         <div class="item"> <img lazy-src="http://images2.fanpop.com/image/photos/8900000/death-note-movie-1-cover-death-note-the-movie-8968544-349-500.jpg"> </div>
         <div class="item"> <img lazy-src="http://www.impawards.com/2014/posters/ouija.jpg"> </div>
         <div class="item"> <img lazy-src="http://justcreative.com/wp-content/uploads/2008/05/suspician-movie-poster-5.jpg"> </div>
         <div class="item"> <img lazy-src="https://s-media-cache-ak0.pinimg.com/736x/cc/09/8f/cc098f8ca9d5b7815212671c0c251fa1.jpg"> </div>
         <div class="item"> <img lazy-src="http://orig13.deviantart.net/4d95/f/2011/007/b/2/child__s_play_movie_cover_3_by_designerdude0326-d36mlvh.jpg"> </div>
         <div class="item"> <img lazy-src="https://upload.wikimedia.org/wikipedia/en/7/73/DVD_cover_of_the_movie_Secret_Cutting.jpg"> </div>
         <div class="item"> <img lazy-src="http://www.hollywoodreporter.com/sites/default/files/custom/Blog_Images/guardians-of-the-galaxy-movie-poster1.jpg"> </div>
         <div class="item"> <img lazy-src="https://s-media-cache-ak0.pinimg.com/originals/e9/20/a9/e920a9c97b5f7d9b5005001c748bed44.jpg"> </div>
         <div class="item"> <img lazy-src="http://www3.images.coolspotters.com/wallpapers/99326/the-cat-in-the-hat-mobile-wallpaper.jpg"> </div>
         <div class="item"> <img lazy-src="http://www.companyfolders.com/blog/media/2015/04/dracula-untold-poster.jpg"> </div>
         <div class="item"> <img lazy-src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSYRkyEL1GlSh-8Zt7x79ZN8Lnma-4aYrg_MS9VPxGLUm4EiMIhAQ"> </div>
         <div class="item"> <img lazy-src="https://s-media-cache-ak0.pinimg.com/736x/f9/a0/e3/f9a0e397b6d5aab658082a3a81ebe82e.jpg"> </div>
         <div class="item"> <img lazy-src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQixcjxVaC35V7WkV_tR5Z19BaBGdKxKWODBxwSQa00lE4bpSF6"> </div>
         <div class="item"> <img lazy-src="https://marketplace.canva.com/MACFJIeg3d4/1/0/thumbnail_large/canva-chilling-car-park-movie-poster--MACFJIeg3d4.jpg"> </div>
         <div class="item"> <img lazy-src="http://i.dailymail.co.uk/i/pix/2015/08/17/19/2B71134000000578-0-image-a-1_1439834864648.jpg"> </div>
         <div class="item"> <img lazy-src="http://graphicdesignjunction.com/wp-content/uploads/2011/03/choose-movie-poster.jpg"> </div>
      </div>
   </body>
</html>

Answer 1

transform: scale的问题是它对DOM布局没有影响;该项目“占用”了原始尺寸，因此没有任何级别的柔性版收缩将使其尺寸适合。但是，如果您根据width和height制作动画，则实际布局会根据动画进行调整：

.item {
    width: 0;
    height: 0;
    margin: 1%;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.8);
    background: #191919;
    cursor: pointer;
    border-radius: 2px;
    animation: 10s loadInItems ease forwards;
}

@keyframes loadInItems {
    from {
        opacity: 0;
        width: 0;
        height: 0;
    }
    to {
        opacity: 1;
        width: 150px;
        height: 210px;
    }
}

我玩过这些更改，内容只会在项目存在时向下滚动。当图像最终包装到下一行时会出现抖动，但您可以通过使用具有固定宽度的容器来解决这个问题。

缩小的div占用了整个空间，你可以滚动到空的空间

1 个答案: