CSS/JS - 如何覆蓋 1 個孩子而不是其他孩子的父母過渡

Question

HTML

<div class="parent">
    <img class='child' src="https://picsum.photos/200/400?random=1" alt="">
    <img class='child' src="https://picsum.photos/200/400?random=2" alt="">
    <img class='child special-child' src="https://picsum.photos/200/400?random=3" alt="">
    <img class='child' src="https://picsum.photos/200/400?random=4" alt="">
    <img class='child' src="https://picsum.photos/200/400?random=5" alt="">
</div>

CSS

.parent {
    transition: transform 250ms ease-in;
}

所以現在所有的子類都會有transform的過渡效果，但是對於特殊的子（每次都會是不同的圖像並且會用JS而不是css來選擇，我只是把類放在html中來解釋）我想要過渡到不同的部分，我想在它上面做 2-3 個過渡，它們一起將占用其他人擁有的 250 毫秒，我想在其他人移動的同時進行（我希望全部轉換為go 同時發生）它們都在單擊事件偵聽器時被調用。

問題是我無法覆蓋父級上的轉換，因為其他孩子需要它，如果我向子級添加過渡屬性，它不會做任何事情（因為它在那里用於對其子級進行轉換）。

那么我怎么能給“特殊孩子”我想要的過渡屬性？？？

謝謝

Answer 1

除了在.parent中設置轉換規則（因此它的子代繼承它），您可以將所需的轉換直接應用於除“特殊”元素之外的所有.child元素：

.child:not(.special-child) { ... }

然后，為該元素制定正確的規則。

 document.getElementById('transform').addEventListener('click', function() { var children = document.querySelectorAll('.child'); children.forEach(function(child) { child.classList.add('transformed'); }); });

 .child:not(.special-child) { transition: transform 2s; } .transformed:not(.special-child) { transform: rotate(90deg); } .special-child { transition: width 0.5s, height 0.5s 0.5s, transform 1s 1s; width: 100px; height: 100px; } .special-child.transformed { width: 150px; height: 150px; transform: rotate(90deg); }

 <div class="parent"> <img class='child' src="https://picsum.photos/100/100?random=1" alt=""> <img class='child special-child' src="https://picsum.photos/100/100?random=2" alt=""> <img class='child' src="https://picsum.photos/100/100?random=3" alt=""> </div> <button id="transform">Click me!</button>

Answer 2

在 .child 上設置變換

 .child { transition: transform 2s; } .child.transformed { transform: rotate(90deg); } .special-child { transition: width 0.5s, height 0.5s, transform 1s; width: 100px; height: 100px; } .special-child.transformed { width: 150px; height: 150px; transform: translateY(200px); }

 <div class="parent"> <img class='child' src="https://picsum.photos/100/100?random=1" alt=""> <img class='child special-child' src="https://picsum.photos/100/100?random=2" alt=""> <img class='child' src="https://picsum.photos/100/100?random=3" alt=""> </div>