В настоящее время я просматриваю и изучаю, как правильно создавать анимации CSS3, и я столкнулся с проблемой. У меня есть ящик, который сейчас сидит в горизонтальном центре страницы, и я хотел бы, чтобы он двигался влево с переходом, когда к нему применяется класс.
characterBox уже привязан к div при загрузке страницы. Однако когда я добавляю characterActive в div с jQuery, он перемещается непосредственно влево без перехода. Что я делаю не так? Любая помощь приветствуется!
.characterActive {
left: 15px;
position: absolute;
}
.characterBox {
display: inline-block;
padding-left: 8px;
padding-right: 8px;
padding-top: 15px;
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
transition: left 0.5s ease;
/* Sit Horizontally */
margin: auto;
text-align: center;
}
Вы переключаетесь с статического на абсолютное позиционирование, добавляя этот класс, который в порядке, но переход туда невозможен, потому что left
значение из статического элемента является auto
(переходы с/на автоматические значения ненадежны, см. Этот отчет об ошибке)
Поэтому добавьте:
.characterBox{
left: 0px;
}
Также вам нужно переключить порядок определений, потому что ваше второе left
правило будет переопределять первый (http://jsfiddle.net/yLgkK/)
Похоже, что он не работает с left
имуществом. вместо этого попробуйте использовать margin-left
.