Как сделать изменение стилей с помощью JavaScript плавным?

Question

[Mixa]

Использую вот такое решение:

<script>
    var logoElem = document.getElementsByClassName('logoimg');
    var logoElem = logoElem[0];

    window.onscroll = function() {
      if (logoElem.classList.contains('logoonscroll') && window.pageYOffset < 200) {
        logoElem.classList.remove('logoonscroll');
      } else if (window.pageYOffset > 200) {
        logoElem.classList.add('logoonscroll');
      }
    };
  </script>

Но при таком подходе изменения отображаются очень резко и у пользователя все резко прыгает на экране. Есть ли способ заставить событие осуществляться более плавно?

Answer 1

[Владислав Лысков]

css transition

Comments

[Mixa]

Скажите, а как быть если я высоту блока изменял добавление класса к уже существующему?

Вот было .logoimg я добавляю нему при прокрутке класс .logoonscroll, чтобы изменить рахмер логотипа. Теперь вот обеим классам добавил свойства:

-webkit-transition: height 2s linear; 
 -moz-transition: height 2s linear; 
 -ms-transition: height 2s linear; 
 -o-transition: height 2s linear; 
 transition: height 2s linear;

но в итоге так не работает почему-то :( Что я делаю не так?

[Владислав Лысков]

Mixa: я тебя совсем не понял, работает как-то так https://jsfiddle.net/ofc22o4u/