元素在转换比例之前跳转

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不是真正的解决方案您可以移动元素，为这些元素预先分配空间，添加更多代码，以便其他元素顺利地滑过（transform：translateX）作为一些建议。不过，这已经开始进入'太宽阔'的无人区域了。