Как анимировать смену класса?

Question

[Вадик Серебрянский]

Ку Ку.
Установил простой стики навбар, который меняется при скролле. Вот его код:

$(function(){
var $window = $(window);
var $mainNav = $("#header");

$window.scroll(function() {
if ($window.scrollTop() >= 1) {
$mainNav.addClass("is-scrolling");
}
else {
$mainNav.removeClass("is-scrolling");
}
});
});

Можно и по-другому:

jQuery(window).scroll(function(){
    "use strict";
    var b = jQuery(window).scrollTop();
    if( b > 60 ){
        jQuery("#header").addClass("is-scrolling");
    } else {
        jQuery("#header").removeClass("is-scrolling");
    }
});

Это простота отлично работает, но резко. Я хочу анимировать этот процесс, но у меня сжались колодки и я не догоняю как это сделать сторонним методом, например, через easing.js (так вообще делают?оО)
В общем, гайз, подскажите как это анимировать, любой метод, что на ум придет пишите, мне нужно ток уловить принцип. Всем заранее спасибо, не ругайтесь на меня)

Comments

[Андрей Б.]

Так в CSS и анимируй. Пример бы видеть или стили хотя бы, скрипты ни о чем не говорят.
Если нужна плавность, добавь необходимые стили в класс is-scrolling + транзишен. Если нужно что-то посложнее тогда юзай @keyframes

[alex]

через css-transition можно, только что вы анимировать собрались? какое свойство?

[Вадик Серебрянский]

Андрей Б.: Alex: Добавил ссыль на сайт, крутните вниз. Вот сие действие хочу анимировать. Какой-нибудь плавный переход. Не воткну вообще(

[javedimka]

Вадик Серебрянский: У тебя слева внизу на сайте есть стрелка которая появляется когда скролишь вниз, с нее своруй реализацию.

Answer 1

[alex]

.header-style1 {
    transition-duration: .3s;
    transition-property: background-color, padding-top, padding-bottom;
    transition-timing-function: ease-in-out;
}

.header-style1.is-scrolling {
    background-color: #323a45;
    padding-top: 5px;
    padding-bottom: 5px;
}

Comments

[Вадик Серебрянский]

Спасибо! А я сижу все через jQuery пытаюсь, оказывается все как всегда проще)