StivinKing
@StivinKing

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

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

Есть вот такая конструкция
<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;
}


Что я упускаю из вида?
  • Вопрос задан
  • 177 просмотров
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Вообще, всё нормально работает:
https://jsfiddle.net/koceg/db6wso62/1/
Единственное, чего не хватает в вашем коде это первоначального состояния, переход из которого должен анимироваться. Видимо, дело в этом.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы