|
|
27.05.2020, 18:27
|
|
Профессор
|
|
Регистрация: 14.03.2010
Сообщений: 194
|
|
|
Плавное появления элемента
function test(text){
document.body.innerHTML+='<div id="alert" class="alert">'+text+'</div>';
setInterval(function(){
elem("alert").classList.add("alert-open");
},100)
}
.alert {
position: fixed;
left: 0;
right: 0;
bottom: -30%;
transition-property: bottom;
transition-duration: 0.5s;
}
.alert-open {
bottom: 0%;
}
Когда вызываем функцию у нас появляется блок который плавно выезжает.
Подскажите пожалуйста как избавится от setInterval?
Спасибо. |
|
27.05.2020, 18:58
|
|
Профессор
|
|
Регистрация: 14.03.2010
Сообщений: 194
|
|
|
Не то.
|
|
27.05.2020, 19:01
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Не обратил внимание на классы.
Странно, у вас что вся страница будет из одного DIV? Создавайте, затем добавляйте его в документ, и добавленному указывайте и имя класса, и таймер не потребуется.
Анимации CSS можно задать и задержку, если требуется.
Последний раз редактировалось laimas, 27.05.2020 в 19:15.
|
|
27.05.2020, 19:26
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от dima85
|
|
Подскажите пожалуйста как избавится от setInterval?
|
измерить ширину окна перед classList.add |
|
27.05.2020, 19:43
|
|
Профессор
|
|
Регистрация: 14.03.2010
Сообщений: 194
|
|
Сообщение от рони
|
|
измерить ширину окна перед classList.add
|
Не совсем понял о чем вы. Окно браузера самостоятельно сделать другого размера? Это не заставить делать посетителей сайта.  |
|
27.05.2020, 19:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от dima85
|
|
Не совсем понял о чем вы
|
document.documentElement.clientHeight;
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.alert {
position: fixed;
left: 0;
right: 0;
bottom: -30%;
transition-property: bottom;
transition-duration: 0.5s;
}
.alert-open {
bottom: 0%;
font-size: 48px;
text-align: center;
}
</style>
</head>
<body>
<script>
function test(text){
let elem = document.createElement('div');
elem.className = 'alert';
elem.innerHTML = text;
document.body.appendChild(elem);
document.body.scrollHeight;
elem.classList.add("alert-open");
}
test('text')
</script>
</body>
</html>
Последний раз редактировалось рони, 27.05.2020 в 21:04.
|
|
27.05.2020, 19:49
|
|
Профессор
|
|
Регистрация: 14.03.2010
Сообщений: 194
|
|
|
Сообщение от laimas
|
Не обратил внимание на классы.
Странно, у вас что вся страница будет из одного DIV? Создавайте, затем добавляйте его в документ, и добавленному указывайте и имя класса, и таймер не потребуется.
Анимации CSS можно задать и задержку, если требуется.
|
Скорее вы совсем не поняли работу кода. Обратите еще внимание на 2 строку, там +=
Блок добавляется и позиционируется поверх всего сайта. |
|
27.05.2020, 19:57
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от dima85
|
|
там +=
|
не делайте так, если не хотите проблем, сотрутся все обработчики после перезаписи. |
|
27.05.2020, 20:47
|
|
Профессор
|
|
Регистрация: 14.03.2010
Сообщений: 194
|
|
|
Сообщение от laimas
|
Не обратил внимание на классы.
Странно, у вас что вся страница будет из одного DIV? Создавайте, затем добавляйте его в документ, и добавленному указывайте и имя класса, и таймер не потребуется.
Анимации CSS можно задать и задержку, если требуется.
|
|
Сообщение от рони
|
|
не делайте так, если не хотите проблем, сотрутся все обработчики после перезаписи.
|
Понял, спасибо. Ваше решение работает хорошо на компьютере. Но на телефоне Chrome, Firefox - нет плавного появления, появляется сразу.
Есть идеи почему? (Мой код плавно работал и на телефоне)
Последний раз редактировалось dima85, 27.05.2020 в 20:51.
|
|
27.05.2020, 21:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от dima85
|
|
Есть идеи почему?
|
возможно там нет documentElement, измерьте что-то другое например
document.body.scrollHeight;
смотрите исправленный пример выше
Последний раз редактировалось рони, 27.05.2020 в 21:05.
|
|
|
|
