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

Question

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

&.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 class 时，div 会从 opacity: 0.0 变为 opacity: 1.0，并带有 transition-delay。这按预期工作。然而，当我做悬停效果时，这个延迟也出现在 individual divs 上。所以第一个hover很快，其他的就延迟等等

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

Answer 1

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

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

与：

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

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

Different transition delays for added class and hover effect

css

css-transitions