添加动画以进行flex-wrap

Question

当涉及到包装点时我们如何添加动画？

也许这可以帮助:

我们有一个标题和标题内部我们有flex attr的容器,当我们从下到上调整浏览器的高度时,方向是列,或者当我们更改浏览器的高度时,这些项目突然重新形成,我只是想为此事件添加动画.谢谢

<header>
        <div class="container">
            <div class="item1 item"></div>
            <div class="item2 item"></div>
            <div class="item3 item"></div></div></header>


header {
        width: 200vw;
        max-height: 100vh ;
    }


.container{
        display: flex;
        max-height:100vh;
        flex-direction: column;
        flex-wrap: wrap;
        align-content:flex-start;
}



.item1 {
    background-color: red;
    height: 200px;
    flex: 1 0 150px;
}


.item2 { 
    background-color: blue;
    height: 200px;
    flex: 1 0 150px;

}


.item3 { 
    background-color: orange;
    height: 200px;
    flex: 1 0 150px;

}

Answer 1

我有类似的需求并创建了一个简单的实用程序来实现它。
- CodePen 上的演示：https://codepen.io/hideya/pen/Jamabx
- GH 要点： https: //gist.github.com/hideya/16ed168a42f74eb5d2162b4e743940ff

该实现有点疯狂，几乎假设除了 xy 坐标外，弹性项目没有任何变化。您可能需要调整 z-index，因为它将项目的“位置”切换为“绝对”。希望这可以帮助。

window.addEventListener('load', function(event) {
  var targetClassName = 'flex-wrap-anim';
  var defaultDuration = '0.3s';

  var dummyList = [];
  function addDummy(item, duration) {
    var top = item.offsetTop;
    var left = item.offsetLeft;
    setTimeout(function() {
      item.style.position = 'absolute';
      item.style.top = top + 'px';
      item.style.left = left + 'px';

      var dummyDiv = document.createElement('div');
      dummyDiv.classList.add(targetClassName + '-dummy');
      var rect = item.getBoundingClientRect();
      dummyDiv.style.width = rect.width + 'px';
      dummyDiv.style.height = rect.height + 'px';
      dummyDiv.style.visibility = 'hidden';
      dummyDiv['__' + targetClassName + '_pair'] = item;
      dummyDiv['__' + targetClassName + '_duration'] = duration;
      item.parentNode.appendChild(dummyDiv);
      dummyList.push(dummyDiv);
    }, 0);
  }

  var conts = document.getElementsByClassName(targetClassName);
  for (var i = 0, max = conts.length; i < max; i++) {
    var cont = conts[i];
    cont.style.positoin = 'relative';
    var duration = cont.getAttribute('data-duration')
      || defaultDuration;
    var items = cont.getElementsByTagName('div');
    for (var i = 0, max = items.length; i < max; i++) {
      addDummy(items[i], duration);
    }
  }

  window.addEventListener('resize', function(event) {
    dummyList.forEach(function(dummyDiv) {
      var item = dummyDiv['__' + targetClassName + '_pair'];
      var duration = dummyDiv['__' + targetClassName + '_duration'];
      if (item.offsetTop != dummyDiv.offsetTop) {
        item.style.transition = 'all ' + duration;
        item.style.top = dummyDiv.offsetTop + 'px';
        item.style.left = dummyDiv.offsetLeft + 'px';
      } else {
        item.style.transition = '';
        item.style.left = dummyDiv.offsetLeft + 'px';
      }
    });
  });
});

Answer 2

虽然仅使用 CSS 无法完成此操作，但您可以使用 JQuery 来完成此操作。当使用行查看弹性盒时，如果创建或删除新行，弹性盒将更改高度。知道了这一点，我们可以.resize()向页面添加一个函数来测试窗口大小调整是否改变了 Flexbox 的高度。如果有，您就可以执行动画。我在这里创建了一个JFiddle示例。

下面是实现此功能的代码：

$(document).ready(function() {
 var height = $('.container').css('height');
 var id;
 $(window).resize(function() {
  clearTimeout(id);
  id = setTimeout(doneResizing, 500);
 });
 function doneResizing() {
        var newheight = $('.container').css('height');
    if (newheight != height) {
        $('.item').fadeOut();
      $('.item').fadeIn();
      height = newheight;
    }
    }
});

现在，对于使用列的弹性盒，我们需要检测宽度何时发生变化。这稍微困难一些，因为 Flexbox 宽度将占用最大分配的宽度，因为默认情况下它是块样式元素。因此，要实现此目的，您需要使用 将其设置为内联 Flexbox display: inline-flex，或者将 Flexbox 的最大宽度设置为等于其最大内容的宽度。设置其中之一后，您可以使用与上面相同的代码，除了调整它以检测宽度而不是高度的变化。

这些更改在调整大小时将动画应用于所有元素。如果您只想将其应用于行/列发生变化的元素怎么办？这需要更多的努力，但是是可行的。您需要if在 javascript/jquery 代码中编写许多语句来捕获flex-item根据宽度/高度应用动画的位置。