Попытка выполнить переход CSS при изменении класса

Интересно, был ли способ сделать переход css, когда div задан определенный класс. Мой лучший пример - это сайт http://ideaware.co/

При прокрутке вниз и заголовок становится фиксированным, он меняет цвет фона и имеет непрозрачность. Действительно приятно выглядеть.

Я работаю над шаблоном, который у меня есть здесь http://www.niviholdings.com/collide/, и что я хочу сделать, когда <nav> фиксируется, я хочу, чтобы <ul> , чтобы переместиться вправо.

Надеюсь, я правильно объясню это.

Ответы

Ответ 1

2 балла, я обнаружил, что может помочь:

Переходы с auto на фиксированное значение могут быть проблемой. В конце концов вы можете попробовать установить margin-left .main-nav-ul на фиксированное значение по умолчанию, а не только на то, чтобы оно было липким.

Второй (и это хакерский). Попробуйте применить класс для .main-nav-ul delayed:

setTimeout(function() {
    $('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js
}, 100);

Ответ 2

Что вы можете...

document.querySelector('#header').addEventListener('click', function(e) {
    e.target.classList.toggle('transition');
})
#header {
    background: red;
    padding: 10px 0;
    position: relative;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    left:0;
}

#header.transition {
    background: green;
    left: 50px;
}
<div id="header">Click me to toggle class</div>

Ответ 3

CSS переходы в 4 простых шага

  1. Убедитесь, что то, что вы хотите сделать, возможно с помощью переходов CSS. Вы можете сделать это, проверив документы W3C.

  2. Добавьте переход и ваш начальный стиль к базовому элементу.

  3. Добавьте класс или состояние, у которого есть стили, которые изменились.

  4. Добавьте механизм для добавления класса (если применимо).

Быстрый пример, скажем, вы хотите анимировать изменение поля на :hover. Вы бы просто сделали это:

element {
  margin-left: 10px;
  transition: margin-left linear .5s;
}

element:hover {
  margin-left: 0;
}

И тут быстрая демонстрация.