添加动画以进行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

虽然单独使用CSS无法做到这一点，但您可以使用JQuery实现此目的。使用行查看flexbox时，如果创建或删除了新行，则flexbox将更改高度。知道了这一点，我们可以在页面中添加一个.resize（）函数来测试窗口调整大小是否改变了flexbox的高度。如果有，则可以执行动画。我创建了一个示例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将其设置为内联flexbox，或者将flexbox的最大宽度设置为最大的内容宽度。一旦设置了其中一个，就可以使用与上面相同的代码，除了调整它以检测宽度而不是高度的变化。

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

Answer 2

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

实现有点疯狂，除了xy coords之外，几乎没有假设flex项目没有变化。您可能需要调整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';
      }
    });
  });
});