添加类和悬停效果的不同过渡延迟

Question

所以基本上我有四个div框，当通过javascript添加类时会出现。它们以过渡延迟显示，因此它们不会在添加类时同时到达。这是通过以下代码完成的：

&.active {
@for $i from 1 through 4 {
&:nth-last-child(#{$i}n) {
transition-delay: #{($i * 0.07) - 0.07}s;
opacity: 1.0;
}                
}
&:hover {
transform: scale(1.20);
transition: all 0.2s ease-out; 
}
}

因此，当添加.active类时，div 会从opacity: 0.0变为opacity: 1.0，并带有transition-delay。这按预期工作。但是，当我执行悬停效果时，此延迟也存在于各个div上。所以第一个悬停很快，其余的延迟等。

我不完全确定如何解决这个问题。我可以以某种方式"删除"之后的转换延迟，或者...？

Answer 1

似乎您想在悬停元素时防止延迟效果，您可以做的是将:not(:hover)添加到添加transition-delay的原始选择器中。替换原始选择器：

&:nth-last-child(#{$i}n)

跟：

&:not(:hover):nth-last-child(#{$i}n)