Показать анимацию - PullRequest
Новая
       41

Показать анимацию

0 голосов
/ 24 октября 2018

Я закодировал анимацию раскрывающегося изображения и наткнулся на проблему, возникшую при создании. 

.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>

Кажется, что анимация работает нормально, за исключением того, что она не скользит плавно.Кажется, есть какой-то джиттер.

Как сделать анимацию более плавной?

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Я бы использовал элемент <img> для этого и удалил его при загрузке, после того как я передал src родительскому элементу backgroundImage, так как он уже был загружен: 

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 .

0 голосов
/ 24 октября 2018

Вы можете подождать, пока загрузится страница / изображение, а затем запустить анимацию.Приведенный ниже код является грубым способом применения класса анимации один раз с помощью 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>
...