CSS轉換 - 我需要一個解釋

Question

我試圖在CSS中轉換一些元素。我通過爲每個要轉換的元素添加一個單獨的選擇器使其工作正常，但當我爲所有元素使用一個選擇器（它們最終在同一個地方）時，它不起作用。有人能解釋爲什麼它不能像這樣工作嗎？

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>

正如你可以看到，左邊的屬性不爲第四和第五元素過渡。

這裏的工作片斷：

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>

爲什麼會出現這種情況？我無法在文檔中找到答案。

Answer 1

你的問題，是因爲當你共享同一:hover規則，你設置你的第四和第五元素left: 0，所以他們會得到相應positionated他們的父母是相對的（.block），那麼就沒有空間讓他們根據你的願望做動畫。當您使用單獨的選擇器時，left保持其默認值auto，然後right正確地在這兩個元素上進行動畫。

如果您未指定left或right，則其默認值爲auto，而不是0。 C heck MDN docs.

Answer 2

儘管@Juan已經回答了，您可以考慮使用translate prop而不是絕對位置左上角。 下面是一篇關於： 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); 
}