Почему после добавления на jQuery класса, не срабатывает css3 анимация?

Question

[Ivan Stroykin]

Доброго времени суток,

Есть вот такая конструкция

<div class="logo-box">
    <div class="logo-1"></div>
    <div class="logo-2"></div>
 </div>

Добавляю с помощью jQuery класс к блоку логотипа
$('.logo-box').addClass("logo-box-act");

Но плавность появления прописанная на css не происходит. Логотип просто сразу появляется.
Стили (начальное состояние)

.logo-box{
  width: 217px;
  height: 67px;
  position: absolute;
  left: 50%;
  margin: 30px -108px 0;
  z-index: 10000;
}
.logo-1{
  width: 217px;
  height: 67px;
  background: url(../img/logo-1.png) no-repeat;
  position: absolute;
  opacity: 0;
}
.logo-2{
  width: 217px;
  height: 67px;
  background: url(../img/logo-2.png) no-repeat;
  position: absolute;
  top: -1000px;
}

Стили (конечное состояние)

.logo-box-act .logo-1{
  opacity: 1;
  -webkit-transition: all 1s ease 2s;
  transition: all 1s ease 2s;
}
.logo-box-act .logo-2{
  top: 0;
  -webkit-transition: all 1s ease 1s;
  transition: all 1s ease 1s;
}

Что я упускаю из вида?

Answer 1

[Алексей Уколов]

Вообще, всё нормально работает:
https://jsfiddle.net/koceg/db6wso62/1/
Единственное, чего не хватает в вашем коде это первоначального состояния, переход из которого должен анимироваться. Видимо, дело в этом.

Comments

[Ivan Stroykin]

Забыл предоставить код первоначального состояния. Сейчас прикреплю в основную тему

[Алексей Уколов]

Опять же, работает - https://jsfiddle.net/koceg/db6wso62/2/

[Ivan Stroykin]

Алексей Уколов: Видимо что-то не правильно в этой конструкции.
window.onload = function(){
$('.logo-box').addClass("logo-box-act");

$('.logo-box').animate( { margin: "30px 0 0 0", top: 0, left: "70px" }, 1000);
$('.start-loading').animate( { width: "365px" }, 1000, function(){
$('.start-loading').animate( { opacity: 0 }, 2000, function(){
$('.start-loading').css({ display: "none" })
});
});
}

[Алексей Уколов]

Да нет, всё ок - https://jsfiddle.net/koceg/db6wso62/3/

[Алексей Уколов]

И с картинками - https://jsfiddle.net/koceg/db6wso62/4/

[Ivan Stroykin]

Алексей Уколов: Да как же так то? Сейчас залью на сервер, чтобы показать. Мистика какая-то

[Ivan Stroykin]

Алексей Уколов: вот пример --> ideas.hol.es

[Алексей Уколов]

У вас проблема в том, что customScrollbar полностью перерендеривает body. На самом деле, все анимации работают нормально, но те элементы мгновенно заменяются новыми, у которых класс уже выставлен, соответственно, анимировать нечего.

[Алексей Уколов]

Вам нужно добавление класса повесить на callbacks.onCreate или callbacks.onInit, не знаю какое событие в данном случае нужно.

[Ivan Stroykin]

Алексей Уколов: эх..копал копался, но так толком и не нашел нормальной информации (либо же просто не понял её). Возможно ли узнать от вас подробнее?

[Алексей Уколов]

А чего подробнее-то? Вам нужно инициализировать свои логотипы после того, как плагин скролбара сработает. Для этого там есть события, всё в документации...