Fade DIV out/in während CSS-Medien Abfrage

Mein Ziel ist es, die .container Inhalt während einer Fenstergröße bei 1400, 1600 und 1800 Pixel Größe zu verblenden. Derzeit wird die Animation nur einmal bei der 1400-Marke und keiner der anderen abfeuern.Fade DIV out/in während CSS-Medien Abfrage

Letztendlich würde ich .container bevorzugen, um während dieser Größenanpassungen auszublenden und zurückzuschalten, um ein schönes Benutzererlebnis zu bieten. Ich bin nicht ganz sicher, ob dies allein mit CSS erreicht werden kann, oder ob dies einige JS auch brauchen ...

.container 
{ 
    width: 1225px; 
    left: -2px; 
    padding-top: 275px; 
    padding-left: 37px; 
    position: relative; 

} 

@media (min-width: 1400px) { 
.container 
{ 
    width: 1375px; 
    left: -60px; 
    -webkit-animation: fadeonresize 0.6s ease-in-out; 
} 
} 

@media (min-width: 1600px) { 
.container 
{ 
    width: 1575px; 
    left: -140px; 
    padding-top: 272px; 
    -webkit-animation: fadeonresize 0.6s ease-in-out; 
} 
} 

@media (min-width: 1800px) { 
.container 
{ 
    width: 1800px; 
    left: -260px; 
    padding-left: 36px; 
    padding-top: 285px; 
    -webkit-animation: fadeonresize 0.6s ease-in-out; 
} 
} 

@-webkit-keyframes fadeonresize { from { opacity: 0; } to { opacity: 1; }}

Quelle

2016-05-19 Anonymous

die Medienabfrage Feuer nur einmal, weil die Reihenfolge der Anfragen nicht korrekt ist, die umzukehren und es wird dreimal Feuer .. –

Dies liegt daran, nachdem die Animation einmal ausgeführt wird, an jedem Haltepunkt, wird es Führen Sie es nicht erneut aus, da es bereits eine CSS-Eigenschaft ist und keine Änderung zwischen den Haltepunkten auftritt. Da für Ihre Animation keine Wiederholungseinstellung festgelegt ist, wird sie nur beim ersten Aufrufen der Animation ausgeführt. Versuchen Sie, drei verschiedene Animationen wie folgt aus:

@media (min-width: 1400px) { 
.container 
{ 
    width: 1375px; 
    left: -60px; 
    -webkit-animation: fadeonresize1 0.6s ease-in-out; 
} 
} 

@media (min-width: 1600px) { 
.container 
{ 
    width: 1575px; 
    left: -140px; 
    padding-top: 272px; 
    -webkit-animation: fadeonresize2 0.6s ease-in-out; 
} 
} 

@media (min-width: 1800px) { 
.container 
{ 
    width: 1800px; 
    left: -260px; 
    padding-left: 36px; 
    padding-top: 285px; 
    -webkit-animation: fadeonresize3 0.6s ease-in-out; 
} 
} 

@-webkit-keyframes fadeonresize1 { from { opacity: 0; } to { opacity: 1; }} 
@-webkit-keyframes fadeonresize2 { from { opacity: 0; } to { opacity: 1; }} 
@-webkit-keyframes fadeonresize3 { from { opacity: 0; } to { opacity: 1; }}

Quelle

2016-05-19 18:16:34

Great! Das bringt mich näher zu dem, was ich erreichen möchte. Ich habe gerade festgestellt, dass dies immer noch beim Laden der Seite ausgelöst wird und nicht nur bei der Größenänderung. Interessieren Sie sich für ein Beispiel, das nur bei der Größenänderung animiert wird? Ich verstehe, wenn dies außerhalb des Umfangs der ursprünglichen Frage liegt. –

Angesichts der Tatsache, dass CSS-Medienabfragen immer dann ausgelöst werden, wenn die Bildschirmabmessungen übereinstimmen, bezweifle ich, dass es nur in CSS möglich wäre. Sie könnten Javascript verwenden und die window.onresize() -Methode verwenden, wenn Sie dies erreichen möchten. –

Fade DIV out/in während CSS-Medien Abfrage

Antwort

Verwandte Themen