将动画添加到 flex-wrap

Question

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

也许这会有所帮助：

我们有一个标题，并且在该标题内部我们有带有 flex attr 的容器，当我们从下到上调整浏览器的大小或当我们改变浏览器的高度时，这些项目突然重塑时，方向是列，我只想添加动画到这个事件.thx

<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() 函数来测试窗口调整大小是否改变了弹性框的高度。如果有，您可以执行动画。我创建了一个示例JFiddle here。

下面是实现这项工作的代码：

$(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 将其设置为内联弹性框，或者将弹性框的最大宽度设置为等于其最大内容的宽度。一旦你设置了其中一个，你就可以使用与上面相同的代码，除了调整它来检测宽度而不是高度的变化。

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