Плавное появления элемента
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? Спасибо. |
Не то.
|
Не обратил внимание на классы.
Странно, у вас что вся страница будет из одного DIV? Создавайте, затем добавляйте его в документ, и добавленному указывайте и имя класса, и таймер не потребуется. Анимации CSS можно задать и задержку, если требуется. |
Цитата:
|
Цитата:
|
Цитата:
<!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>
|
Цитата:
Блок добавляется и позиционируется поверх всего сайта. |
Цитата:
|
Цитата:
Цитата:
Есть идеи почему? (Мой код плавно работал и на телефоне) |
Цитата:
document.body.scrollHeight; смотрите исправленный пример выше |
| Часовой пояс GMT +3, время: 20:21. |