Question

我有一个div，其中有2个div，其中一个是容器image-holder，而另一个div都有背景图像。

我要实现的是，当我将鼠标悬停在父div上时，我想要调整this CodePen的div大小，但是在此过渡期间图像抖动。但是我不希望在调整大小时图像抖动。

如何可以在不标记改变任何实现这一目标？

这是我尝试过的。

.first-parent {
    height: 263px;
    width:550px;
    position: relative;
}

.image {
    height: 263px;
    left: 0;
    top: 0;
    z-index: -1;
    height:100%;
    width:100%;
    background: #dedede;
    position: relative;
    -webkit-transform: scale(1);
    transform: scale(1);
    position: absolute;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.image-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    transition: all 1s cubic-bezier(0.45, 0, 0.06, 1);
    background-size: cover;
    background-repeat: no-repeat;
}

.first-parent:hover .image-holder {
    height: 157px;
    -webkit-transform: scale(1.04) !important;
    transform: scale(1.04) !important;
    z-index: 0;
}

<div class="first-parent">      
    <div> 
        <div class="image-holder">
            <div class="image" style="background-image:url(https://images.steelcase.com/image/upload/c_fill,dpr_auto,q_70,h_656,w_1166/v1432747782/www.steelcase.com/Tour.jpg)"></div>
        </div>
        <div class="ad-description">
            <p class="owner">Sep 14 2019</p>
            <p class="description">My financial calendar test</p>
        </div>
    </div>
</div>

Answer 1

Tl; Dr：避免在必要时使用“布局属性”动画

代替过渡/动画-会影响 layout 的样式（例如height，padding，border等属性），您应该坚持使用到可以廉价地GPU加速的处理器（例如opacity，transform）。

overflow:hidden包装元素，以防止.image超出范围
transition: transform←代替all
要聪明，不要将图像的高度设置为硬编码的值-可能不会显示可变的描述文本长度，请设置动画的height（在这种情况下不会显着影响性能）：描述:before伪元素将填充其区域

*{margin: 0;}

.first-parent {
  position: relative;
  height: 198px;
  color: #fff;
  overflow: hidden;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image {
  transition: transform 1s cubic-bezier(0.45, 0, 0.06, 1);
  background: 50% 50% / cover no-repeat;
}

.first-parent:hover .image {
  transform: translateY(-30px) scale(1.1);
}

.ad-description {
  position: absolute;
  z-index: 1;
  width: 100%;
  bottom: 0;
  padding: 10px 20px;
}

.ad-description:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 0;
  background: #0bf;
  transition: height 1s cubic-bezier(0.45, 0, 0.06, 1); /* here height is OK-ish - we have a solid background color */
}

.first-parent:hover .ad-description:before {
  height: 100%;
}

<div class="first-parent">
  <div class="image" style="background-image:url(https://i.stack.imgur.com/0F2LB.jpg)"></div>
  <div class="ad-description">
    <p class="owner">Here you can finally</p>
    <p class="description">use a variable <br>number of text lines.</p>
  </div>
</div>

PS ₁：很抱歉，但是在修复CSS使其性能良好之后，我忍不住要删除不必要的剩余.image-holder元素。

PS ₂：有趣的读法：https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

如何在调整div大小时停止抖动的背景图像

1 个答案: