При первой загрузке пользователь видит проблеск конца анимации до начала анимации

У меня есть простая страница, которая включает в себя некоторые анимации. В первый раз, когда страница загружается, пользователь видит конечный результат анимации в течение секунды секунды, прежде чем перейти к началу анимации. Последовательность анимации имеет пустой экран, при этом слова и предложения исчезают или сдвигаются в поле зрения. Я использую javascript-библиотеку animation.css.При первой загрузке пользователь видит проблеск конца анимации до начала анимации

$(document).ready(function() 
{ 
$('#pineappleCheesecake').addClass('animated fadeIn'); 

$('h1').addClass('animated rubberBand'); 

$('p').addClass('animated bounceInUp') 

$('ul').addClass('animated lightSpeedIn'); 

});

Я попытался использовать это вместо документа готового

document.addEventListener('DOMContentLoaded', function() { 
    // ... 
});

Но это не сработало. Затем я попытался взять документ полностью, но у меня были такие же результаты.

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

источник

2014-11-01 Goose

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

Вы пытались использовать jQuery $ (document) .ready (function() { ... }); ? Если да, покажите остальную часть кода. –

Да, он остается на конечный результат, когда скрипт отключен. – Goose

Попробуйте установить все значения CSS в их значение по умолчанию перед запуском javascript. Это может решить проблему.

источник

2014-11-01 19:54:39 DripDrop

Извините, я думал, что все предполагают, что я инициализировал свой код документа document.ready, поскольку я упомянул об этом в своем вопросе как о чем-то, что я вынул. Да, я использовал document.ready. – Goose

Там. Попробуй это. – DripDrop

Nope. Тот же результат. Я пытаюсь получить начальную точку анимации раньше. документ готов и setTimeout задерживает анимацию. – Goose

Я нашел ответ на свою проблему. Хотя это не тот чистый ответ, который я искал, и я все еще подозреваю, что есть более прямое решение, я сделал это решение максимально простым.

В html я окружил все в теле в скобке div.

<div id="coverDiv"> 
... 
</div>

В CSS я установил его свойства.

#coverDiv { 
    background: black; 
    display: none; 
}

В javascript я начал анимацию, показывая coverDiv.

$("#coverDiv").css("display", "inline");

В действительности, coverDiv не распространяется, так как она содержит, и раскрывается в начале анимации.

Благодаря DripDrop для управления этим решением.

источник

2014-11-01 20:39:13 Goose

При первой загрузке пользователь видит проблеск конца анимации до начала анимации

ответ

Смежные вопросы