Sarma noktası söz konusu olduğunda, animasyon eklemeye nasıl animasyon ekleyebiliriz?

Question

belki bu yardımcı olabilir:

bir başlığa sahip ve bu başlığın içine biz esnek özn kabı var ve biz tarayıcısı olanlar yüksekliğini değiştirirken biz alttan üste bizim tarayıcıyı yeniden boyutlandırmak veya yön sütundur öğe aniden bu kullanarak JQuery yapabileceğiniz, sadece bu tek başına CSS ile yapılamaz iken bu 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

animasyon eklemek istiyorum yeniden şekillendirmek. Satırlar kullanarak bir flexbox'a bakarken, yeni bir satır oluşturulduğunda veya kaldırıldığında, flexbox yüksekliğini değiştirecektir. Bunu bildiğinizde, bir pencerenin yeniden boyutlandırılmasının esnek kutunun yüksekliğini değiştirip değiştirmediğini test etmek için sayfaya bir .resize() işlevi ekleyebiliriz. Varsa, bir animasyon yürütebilirsiniz. Bir örnek oluşturdum 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; 
    } 
    } 
}); 

Şimdi sütunlarını kullanarak bir flexbox'a ile biz genişliğinde bir değişiklik meydana geldiğinde algılamak gerekir: Burada

bu işi yapan bir koddur. Bu, flexbox genişliğinin varsayılan olarak bir blok stili eleman olduğu için maksimum tahsis edilen genişliği alacağı için biraz daha zordur. Bunu başarmak için, ekranı kullanarak bir inline flexbox olarak ayarlamanız gerekir: inline-flex veya en fazla içeriğinin genişliğine eşit olan flexbox için maksimum genişlik ayarlayın. Bunlardan birini belirledikten sonra, yükseklik kodunun genişlikteki değişimlerini algılamak için, yukarıdaki gibi aynı kodu kullanabilirsiniz.

Bu değişiklikler, yeniden boyutlandırmadaki tüm öğelere bir animasyon uyguladı. Yalnızca onu satır/sütun değiştiren öğeye uygulamak isterseniz ne olur? Bu daha fazla çaba gerektirir, ancak yapılabilir. Animasyonu genişlik/yüksekliğe göre uygulamak için hangi esnek öğeyi yakalayacağınızı öğrenmek için javascript/jquery kodunuzda çok sayıda if ifadesi yazmanız gerekir.