javascript - 悬停时更改变换状态

Question

所以我有一些这样的CSS代码

    .some_class{
        width: 30%;
        height: 120px;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 100px;
        float: left;
        @include boxShadowLevel(2);
        transition: box-shadow 0.4s, transform 0.4s;

        transform: scale(0);

        &:nth-child(odd):hover{
            transform: translate(-3px, -3px) scale(1.1);
            @include boxShadowLevel(3);
        }

        &:nth-child(even):hover{
            transform: translate(3px, -3px) scale(1.1);
            @include boxShadowLevel(3);
        }

        // Some more css here (which is not relevant for the question)

    }

如您所见，标准变换是 scale(0)，那是因为我使用一些 js 代码加载淡入

$(elem[i]).css("transform", "scale(1)")

问题是悬停没有任何改变，我怀疑这是因为初始变换。

如果没有第二个包装 div 或类似的东西，是否有任何解决方案？

Answer 1

我自己找到了解决方案。这是我的 SCSS(注意添加的“显示”)

.some_class{
    width: 30%;
    height: 120px;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 100px;
    float: left;
    @include boxShadowLevel(2);
    transition: box-shadow 0.4s, transform 0.4s;

    transform: scale(0);

    &.show{
        transform: scale(1);
    }

    &:nth-child(odd):hover{
        transform: translate(-3px, -3px) scale(1.1);
        @include boxShadowLevel(3);
    }

    &:nth-child(even):hover{
        transform: translate(3px, -3px) scale(1.1);
        @include boxShadowLevel(3);
    }

    // Some more css here (which is not relevant for the question)

}

然后添加类“show”而不是在 js 代码中手动设置转换:

$(elem[i]).addClass("show")