悬停时更改变换状态答案

【问题标题】：Changing transform state on hover悬停时更改变换状态
【发布时间】：2018-01-24 16:04:23
【问题描述】：

所以我有一些像这样的 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 或类似的东西，有什么解决方案吗？

【问题讨论】：

您能给我们看一下随附的标记吗？此外，您是否有理由需要将 JS 用于此 scale 转换，而不是像您用于 translate 转换那样的简单 CSS 转换？
html 很大，但它没有相关性（没有样式标签，之前确实有效，...）。我确实使用了 js，所以我可以在加载所有内容时制作动画 +0.2s

标签： javascript jquery html css transform

【解决方案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")

【讨论】：