显示动画

Question

我已经编码了一个揭示图像动画，并且在创建时偶然发现了一个问题。

.container{
  overflow: hidden;
}

.image {
  background-image: url('https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg');
  background-size: cover;
  width: 400px;
  height: 400px;
  animation: 1s ease-out 0s 1 slideInFromLeft;
  overflow: hidden;
}

@keyframes slideInFromLeft {
  0% {
    transform: translatex(-100%);
  }
  100% {
    transform: translatex(0%);
  }
}

<div class="container">
  <div class="image">
  </div>
</div>

该动画似乎运行良好，只是无法平滑滑动。它似乎有某种抖动。

如何使动画幻灯片更流畅？

Answer 1

您可以等待页面/图像加载，然后触发动画发生。下面的代码是通过js一次应用动画类的粗略方法。

window.onload = function() {
    var element = document.getElementById('img1');
    element.classList.add("show");
    element.classList.add("animate");
    
}

.container{
  overflow: hidden;
}

.image {
  background-image: url('https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg');
  background-size: cover;
  width: 400px;
  height: 400px;
  opacity: 0;
  overflow: hidden;
}

#img1.animate{
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

.show {
  opacity:1;
}

@keyframes slideInFromLeft {
  0% {
    transform: translatex(-100%);
  }
  100% {
    transform: translatex(0%);
  }
}

<div class="container">
  <div id="img1" class="image" >
  </div>
</div>

Answer 2

为此，我将使用<img>元素，并在加载时将其删除，因为我已经将src传递给父级的backgroundImage，因为它已经加载了：< / p>

let imageDivs = document.querySelectorAll('.image img');
for (var i = 0; i < imageDivs.length; i++) {
  imageDivs[i].addEventListener('load', imageLoaded)
}

function imageLoaded(e) {
  let div = e.target.closest('div');
  div.style.backgroundImage = 'url('+this.src+')';
  div.classList.add('loaded');
  div.removeChild(div.querySelector('img'));
}

.container{
  overflow: hidden;
}

.image {
  background-size: cover;
  width: 400px;
  height: 400px;
  transform: translatex(-100%);
  overflow: hidden;
}
.image.loaded{
  animation: slideInFromLeft 1s cubic-bezier(.5,0,.3,1) forwards;
}
.image img {
  height: 0;
}

@keyframes slideInFromLeft {
  0% {
    transform: translatex(-100%);
  }
  100% {
    transform: translatex(0);
  }
}

<div class="container">
  <div class="image">
    <img src="https://images.wallpaperscraft.com/image/honda_civic_type_r_honda_type_r_honda_129270_3840x2160.jpg">
  </div>
</div>

这会在图像加载后立即触发特定<div>（如果您有多个）的动画，而不是在页面中的所有图像包含后触发所有这些动画（如果您使用window.load）。

但是，这并不意味着您应该在页面中加载大量资源。优化图像并为当前设备加载正确大小的图像是网站优化中非常重要的一步。为此，您应该使用srcset。