CSS-Übergänge - Ich brauche eine Erklärung

Question

Ich habe versucht, einige Elemente mit Übergang in CSS zu verschieben. Ich habe es gut gemacht, indem ich für jedes Element, das ich überführen möchte, einen separaten Selektor hinzufüge, aber es funktioniert nicht, wenn ich einen Selektor für alle verwende (sie landen sowieso an der gleichen Stelle). Kann mir bitte jemand erklären, warum es so nicht funktioniert?

body { 
 
\t \t text-align: center; 
 
\t } 
 

 
\t .block { 
 
\t \t position: relative; 
 
\t \t display: inline-block; 
 
\t } 
 

 
\t .part1 { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: relative; 
 
\t \t z-index: 1; 
 
\t } 
 

 
\t .part { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: absolute; 
 
\t \t transition: top 2s ease-in, left 2s ease-in, right 2s ease-in; 
 
\t } 
 

 
\t .block .part:nth-child(2) { 
 
\t \t top: 100px; 
 
\t \t left: 100px; 
 
\t } 
 

 
\t .block .part:nth-child(3) { 
 
\t \t top: 0; 
 
\t \t left: 200px; 
 
\t } 
 

 
\t .block .part:nth-child(4) { 
 
\t \t top: 0; 
 
\t \t right: 200px; 
 
\t } 
 

 
\t .block .part:last-child { 
 
\t \t top: 100px; 
 
\t \t right: 100px; 
 
\t } 
 

 
\t .block .part1:hover ~ .part { 
 
\t \t top: 0; 
 
\t \t left: 0; 
 
\t \t right: 0; 
 
\t }

<span class="block"> 
 
\t \t <span class="part1">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
</span>

Wie Sie sehen können, ist die linke Eigenschaft nicht für das vierte und fünfte Element übergehen.

Hier ist der Arbeits Schnipsel:

body { 
 
\t \t text-align: center; 
 
\t } 
 

 
\t .block { 
 
\t \t position: relative; 
 
\t \t display: inline-block; 
 
\t } 
 

 
\t .part1 { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: relative; 
 
\t \t z-index: 1; 
 
\t } 
 

 
\t .part { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: absolute; 
 
\t \t transition: top 2s ease-in, left 2s ease-in, right 2s ease-in; 
 
\t } 
 

 
\t .block .part:nth-child(2) { 
 
\t \t top: 100px; 
 
\t \t left: 100px; 
 
\t } 
 

 
\t .block .part:nth-child(3) { 
 
\t \t top: 0; 
 
\t \t left: 200px; 
 
\t } 
 

 
\t .block .part:nth-child(4) { 
 
\t \t top: 0; 
 
\t \t right: 200px; 
 
\t } 
 

 
\t .block .part:last-child { 
 
\t \t top: 100px; 
 
\t \t right: 100px; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(2) { 
 
\t \t top: 0; 
 
\t \t left: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(3) { 
 
\t \t left: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(4) { 
 
\t \t right: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:last-child { 
 
\t \t top: 0; 
 
\t \t right: 0; 
 
\t }

<span class="block"> 
 
\t \t <span class="part1">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t </span>

Warum dies geschieht? Ich konnte die Antwort in der Dokumentation nicht finden.

Answer 1

Ihr Problem ist, weil, wenn Sie die gleiche :hover Regel teilen, sind Sie left: 0 auf Ihrem vierten und fünften Elemente einstellen, so sie werden entsprechend ihrer Eltern zu erhalten, die beliebig positionieren relativ (.block), dann gibt es keinen Raum für sie zu beleben, wie Sie es wünschen. Wenn Sie einen separaten Selektor verwenden, bleibt left auf dem Standardwert von , so dass right korrekt auf diesen beiden Elementen animiert.

Wenn Sie nicht left oder right angeben, ist ihr Standardwert auto, nicht 0. C heck MDN docs.

Answer 2

Obwohl @Juan bereits geantwortet hat, können Sie die Verwendung der Übersetzungsstütze anstelle der absoluten Position oben links in Betracht ziehen. Hier ist der Artikel über: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

body { 
    text-align: center; 
} 

.block { 
    position: relative; 
    display: inline-block; 
} 

.part1 { 
    font-family: Arial; 
    font-size: 50px; 
    font-weight: bold; 
    opacity: 0.2; 
    position: relative; 
    z-index: 1; 
} 

.part { 
    font-family: Arial; 
    font-size: 50px; 
    font-weight: bold; 
    opacity: 0.2; 
    position: absolute; 
display:block; 
    transition: all 2s linear; 
} 

.block .part:nth-child(2) { 
top:0; 
left:0; 

transform:translate(100px,100px); 
} 

.block .part:nth-child(3) { 
top:0; 
left:0; 
transform:translate(200px,0); 
} 

.block .part:nth-child(4) { 
top:0; 
left:0; 
transform:translate(-200px,0); 

} 

.block .part:last-child { 
top:0; 
left:0; 
transform:translate(-100px,100px); 

} 

.block .part1:hover ~ .part { 
    transform: translate(0,0); 
}