jQuery addClass, когда при загрузке документа не запускается дочерний элемент CSS переход - PullRequest
Новая
       6

jQuery addClass, когда при загрузке документа не запускается дочерний элемент CSS переход

0 голосов
/ 28 марта 2020

Мой код похож на 

$(function() {
    // other codes changing html
    $('body').addClass('on');
});


body {
    opacity: 0;
    transition: opacity .5s ease-in-out;
}
body.on {
    opacity: 1;
}
main {
    transform: translateX(50xp);
    transition: transform .5s ease-in-out;
}
body.on main {
    transform: translateX(0);
}

Сначала он работает, но после изменения чего-то другого, появляется main со статусом transform: translateX(0);

Работает в Хотя, я подозреваю, что изменение html из main повлияет на переход? И я попробовал следующий код, он работает. Почему? 

$(function() {
    // other codes changing html
    setTimeout(function(){ $('body').addClass('on'); }, 10);
});

Завершено HTML слишком долго, хотя структура проста, как 

<body>
    <nav></nav>
    <main>
        <header></header>
        <article></article>
    </main>
</body>

Все внутри body генерируется с javascript.

1 Ответ

0 голосов
/ 28 марта 2020

Причина, по которой это происходит, заключается в том, что ваш код executing до загрузки html, чтобы избежать повторения такого поведения, всегда оборачивайте ваш код вокруг , читайте о .ready () 

$( document ).ready(function() {
   // your code goes here
})

Редактировать: Синтаксическая проблема xp в transform: translateX(50xp);

main {
    transform: translateX(50px);
    transition: transform.5s ease-in-out;
}

Дайте мне знать, если это решит вашу проблему.

...