添加动画到flex-wrap [英] adding animation to flex-wrap

问题描述

当涉及到换行时，我们如何添加动画？

when it comes to wrap point how can we add animation?

也许这可以帮助：

我们有一个标题和内部的头，我们有容器与flex attr和方向是列，当我们调整浏览器从底部到顶部或当我们改变浏览器的高度，这些项目突然重塑，我只是想添加动画到这个事件.thx

we have a header and inside of that header we have container with flex attr and the direction is column when we resize our browser from bottom to top or when we changing height of browser those items suddenly reshape , I just want to add animation to this event.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;

}

推荐答案

不能用CSS单独完成，你可以使用JQuery来完成。当使用行查看flexbox时，如果创建或删除了一个新行，flexbox将改变高度。知道这一点，我们可以添加一个.resize（）函数到页面来测试一个窗口调整大小是否改变了flexbox的高度。如果有，您可以执行动画。我已创建了一个示例此处的JFiddle 。

While this cannot be done with CSS alone, you can accomplish this using JQuery. When looking at a flexbox using rows, the flexbox will change height if a new row is created or removed. Knowing this, we can add a .resize() function to the page to test if a window resize has altered the height of the flexbox. If it has, you can then execute an animation. I have created an example 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的最大宽度设置为等于其内容的最大宽度。一旦你设置了其中一个，你可以使用与上面相同的代码，除了调整它来检测宽度，而不是高度的变化。

Now with a flexbox using columns, we need to detect when a change in width occurs. This is slightly more difficult as the flexbox width will take up the maximum allotted width as it is a block style element by default. So to accomplish this, you either need to set it as an inline flexbox using display: inline-flex, or set a maximum width for the flexbox equal to the width of its contents at its largest. Once you have set one of those, you can use the same code as above, except tweaking it to detect changes in width as opposed to height.

这些更改应用了一个动画到所有元素调整大小。如果您只想将它​​应用于其行/列更改的元素，该怎么办？这将需要更多的努力，但是可以做到。你需要在你的javascript / jquery代码中写多个if语句，以捕获基于width / height应用动画的flex-item。

These changes applied an animation to all elements on resize. What if you want to only apply it to the element whose row/column changes? This would take more effort but is do-able. You would need to write many if-statements in your javascript/jquery code to catch which flex-item to apply the animation to based on width/height.

这篇关于添加动画到flex-wrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！