Question

我有一些嵌套元素，其中一个是当您将鼠标悬停在容器上时可以缩放的图像。问题是图像在缩放之前会略微跳跃。我知道它与容器内的额外内容有关，但我无法弄清楚为什么或该怎么办。

当你停止盘旋在容器上时，我也希望比例变换能够平稳地反转。

以下是网站：http://totisdev.azurewebsites.net/productos/

相关HTML

<div class="slide">
    <div class="slide__content">
        <img />
        <div class="slide__text_hover">
            <h2>Totis</h2>
        </div>
        <div class="slide__text">
            <span>3 Productos</span>
            <h2><span>Totis</span></h2>
            <a href=""><span>ver más </span><img /></a>
        </div>
    </div>
</div>

可能与SASS相关

.slide {
    display: inline-block;
    vertical-align: top;
    padding-top: 50px;
    .slide__content {
        position: relative;
        max-height: 350px;
        > img {
            max-height: 300px;
            width: auto;
            margin-bottom: -50px;
            margin-left: -72px;
            display: inline-block;
        }
    }
    .slide__text {
        position: relative;
        text-align: left;
        max-width: 220px;
        h2 {
            box-sizing: content-box;
            font-size: 40px;
            max-width: 280px;
            white-space: normal;
        }
        img {
            vertical-align: middle;
            display: inline-block;
        }
    }
    &:hover .slide__content > img {
        -webkit-transform: scale(1.08);
        transform: scale(1.08);
        -webkit-transition: 0.6s ease;
        transition: 0.6s ease;
    }
    .slide__text_hover {
        display: none;
        vertical-align: top;
        position: relative;
        top: -25px;
        height: 300px;
        padding: 25px 25px 25px 150px;
        z-index: -1;
        left: -200px;
        h2 {
            visibility: hidden;
            font-size: 60px;
            max-width: 280px;
            white-space: normal;
            box-sizing: content-box;
        }
    }
    &:hover .slide__text_hover {
        display: inline-block;
        vertical-align: top;
    }
    &:hover .slide__text {
        position: relative;
        top: -170px;
        transform: translateY(-50%);
        transition: transform 0.6s ease;
        z-index: 2;
        margin-left: 200px;
        h2 {
            font-size: 60px;
            max-width: 280px;
        }
        a {
            display: inline-block;
        }
    }
}

注意：我目前正在使用javascript过渡不透明度，但这无关紧要。

任何和所有帮助/反馈表示赞赏。谢谢！

Answer 1

这是因为在规模发生时你正在移动其他元素。对于简单的概念验证尝试将display:none添加到.slide__text_hover和.slide__text - 您会看到元素不会跳跃而扩展。

由您决定如何处理这些以及如何定位这些元素，因为我假设display:none不是真正的解决方案您可以移动元素，预分配这些元素的空间，添加更多代码，以便其他元素顺利滑过（转换：translateX）作为一些建议。这开始进入“过于宽泛”的境界。尽管如此，堆栈流无人的土地。

元素在变换比例之前跳跃

1 个答案: