Переход CSS не срабатывает

Question

Переход CSS не срабатывает

Я создаю элемент DOM (div), добавляю его в DOM, а затем меняю его ширину одним быстрым нажатием javascript. Теоретически это должно вызвать переход CSS3, но результат будет прямым от A к B, без перехода между ними.

Если я изменю ширину с помощью отдельного тестового события щелчка, все будет работать, как ожидалось.

Вот мой JS и CSS:

JS (jQuery):

var div = $('<div />').addClass('trans').css('width', '20px');
$('#container').append(div);
div.css('width', '200px');

CSS (просто Mozilla на минуту):

.trans {
    -moz-transition-property: all;
    -moz-transition-duration: 5s;
    height: 20px;
    background-color: cyan;
}

Неужели я здесь напортачил, или «все в одном» - это не то, что нужно делать?

Любая помощь действительно приветствуется.

24

jquery css css3 transitions css-transitions

задан Madara Uchiha 15 August 2011 в 20:37

3 ответа

Другие вопросы по тегам:

jquery css css3 transitions css-transitions

Похожие вопросы:

score 21 · Answer 1

Вот два способа сделать это.

1 - CSS-переходы

с помощью setTimeout будет выполняться метод addClass вместо вместо предыдущего сценария, так что событие transition будет срабатывать

]

пример jsfiddle

jQuery:

var div = $('<div class="trans" />');
$('#container').append(div);
// set the class change to run 1ms after adding the div
setTimeout(function() {div.addClass('wide')}, 1);

CSS:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
    -webkit-transition: all 5s ease;
       -moz-transition: all 5s ease;
        -ie-transition: all 5s ease;
         -o-transition: all 5s ease;
            transition: all 5s ease;
}
.wide {
    width: 200px;
}

2 - функция .animate() jQuery

пример jsfiddle

jQuery:

var div = $('<div class="trans" />');
$('#container').append(div);
div.animate({'width': '200px'}, 5000); // 5 sec animation

CSS:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
}

score 3 · Answer 2

В ответ на щедрость:

Если вы не можете позволить себе роскошь знать, какое свойство передается, или просто не думаете, что это хорошая практика - заставить setTimeout, чтобы запустить анимацию, вы можете принудительно использовать оплавление другим способом.

Причина, по которой setTimeout работает в первую очередь, связана с тем, что вы тем временем вызываете полное переформатирование документа, даже если продолжительность установлена на 0. Это не единственный способ вызвать оплавление.

Ссылка на скрипку

JavaScript

for (x = Math.ceil(Math.random() * 10), i=0;i<x;i++){
    $('<div />').appendTo($('#container')).addClass('trans');
}

var divs = $('#container div');
var x = divs.eq(Math.ceil(Math.random() * divs.length));
x[0].offsetHeight;
x.addClass('wide');

С помощью этого JavaScript мы случайным образом добавляем от 1 до 10 div элементов, а затем выберите один из них случайным образом и добавьте класс wide.

Там вы увидите странную строку JavaScript, а именно x[0].offsetHeight. Это основа всей операции. Вызов offsetHeight вызывает переформатирование документа без использования setTimeout или запроса значения CSS.

Что такое перекомпоновка по отношению к DOM:

Перекомпоновка вычисляет макет страницы. Перекомпоновка для элемента пересчитывает размеры и положение элемента, а также запускает дальнейшие перекомпоновки для дочерних элементов, предков и элементов этого элемента, которые появляются после него в DOM. Тогда это вызывает окончательный перекрас. Оплавление очень дорого, но, к сожалению, его можно легко вызвать.

Поэтому, пожалуйста, будьте осмотрительны в том, как вы используете эти функции. Не слишком беспокоит большинство современных браузеров (так как jQuery известен тем, что запускает несколько перефразировок), но все же стоит подумать, прежде чем добавлять что-то вроде этого решения на ваш сайт.

Важное примечание: Это не более или менее эффективно, чем вызов setTimeout . Это не решение волшебной пули, и оно делает то же самое под капотом.

Вот соответствующий CSS для справки:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
    -webkit-transition: all 5s ease;
       -moz-transition: all 5s ease;
         -o-transition: all 5s ease;
            transition: all 5s ease;
}

.trans.wide {
    width: 200px;
}

score 1 · Answer 3

var div = $('<div />');

$('#container').append(div);

div.css('width', '20px').addClass('trans', function() {
   div.css('width', '200px') 
});

Создает новый элемент DIV и добавляет класс «trans» к этому элементу для запуска перехода CSS