добавление анимации в flex-wrap

Question

Когда дело доходит до точки переноса, как мы можем добавить анимацию?

может быть, это может помочь:

у нас есть заголовок и внутри этого заголовка мы имеем контейнер со шлейфом атром и направление столбец, при изменении размера нашего браузера снизу вверх или когда изменение высоты браузера тех предметы внезапно изменить форму, я просто хочу, чтобы добавить анимацию к этому 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; 

} 

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 будет занимать максимальную выделенную ширину, поскольку по умолчанию это элемент стиля блока. Для этого вам нужно либо установить его как встроенный flexbox, используя дисплей: inline-flex, либо установить максимальную ширину для flexbox равную ширине ее содержимого на самом большом. После того, как вы установили один из них, вы можете использовать тот же код, что и выше, за исключением того, что он настраивает его для определения изменений ширины, а не высоты.

Эти изменения применили анимацию ко всем элементам при изменении размера. Что делать, если вы хотите применить его только к элементу, чья строка/столбец изменяется? Это потребует больших усилий, но делает это. Вам нужно будет написать много if-операторов в вашем javascript/jquery-коде, чтобы поймать, какой гибкий элемент применить анимацию на основе ширины/высоты.