css - 将动画添加到 flex-wrap

Question

说到wrap point我们如何添加动画？

也许这可以帮助:

我们有一个标题，在那个标题里面我们有一个带有 flex attr 的容器，当我们从底部到顶部调整浏览器的大小时或者当我们改变浏览器的高度时，这些元素突然 reshape ，我只想添加动画对于这个事件.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 坐标之外， 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';
      }
    });
  });
});