Как получить элемент CSS с переходами, кроме как изначально? - PullRequest
Новая
       11

Как получить элемент CSS с переходами, кроме как изначально?

2 голосов
/ 10 октября 2011

Если у меня есть стиль CSS, следующий: 

.transition {
    transition: left linear .4s;
    -moz-transition: left linear .4s;
    -o-transition: left linear .4s;
    -webkit-transition: left linear .4s;
}

и следующий html: 

<div id="mydiv">Test</div>

и следующий jQuery: 

$(function () {
    $('#mydiv').css('left', '50px');
    $('#mydiv').addClass('transition');
});

тогда при загрузке страницы все еще происходит переход от 0px к 50px, несмотря на то, что класс перехода не добавляется в mydiv до тех пор, пока в jQuery не установлено свойство css left.

Я хотел бы иметь возможность установить начальное свойство css left для mydiv, когда страница загружается (она рассчитывается на основе различных параметров), а не будет анимированным, но при этом все еще будет установлено свойство перехода для после начальной загрузки страницы (перемещение mydiv после загрузки страницы должно быть анимированным).

Как мне это сделать?

1 Ответ

0 голосов
/ 10 октября 2011

Вы можете применить положение на DOM Ready и переход на страницу загрузки.Попробуйте эту скрипку . 

$(function () {
    $('#mydiv').css('left', '50px');
});

$(window).load(function(){
    $('#mydiv').css('left', '100px');
    $('#mydiv').addClass('transition');
});

Вы должны разделить применение двух стилей.Вы можете добиться того же эффекта с setTimeout.

...