Я создал промис для захвата данных с моего сервера, который отлично работает при наличии сетевого подключения.
Я добавил .catch() для отображения элемента DOM, если сервер недоступен. При запуске .catch() работает, и элемент DOM отображается, но исчезает через 2 секунды.
Я попытался добавить элемент DOM в .catch(). Я также попытался поместить дополнение DOM во внешнюю функцию и вызвать ее. Я также попытался передать внешнюю функцию в функцию reject(). Ничего не сработало.
--- Таблица стилей ---
#notice { width: 100vw; height: 100vh; opacity: 0; animation: fade-in 2s; background-color:white; z-index: 60; display:flex; align-items: center; text-align: center; } #notice h1 { font-size: 10vh; font-family: 'Verdana'; color: black; } #notice * { position: static; }
---Джаваскрипт---
getSolvedDeck = () => { let failed = false; new Promise((resolve, reject)=>{ let xhr = new XMLHttpRequest; xhr.open('GET', "https://mrlesbomar.com/solitaire/cgi-bin/get_solved_deck.php"); xhr.onload = () =>{ if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response); } else { reject(xhr.statusText); } } xhr.onerror = () => reject(xhr.statusText); xhr.send(); }).then(stuff=>{ console.info('Awesomeness'); }).catch(error=>{ //Create status screen let notice = document.createElement('div'); notice.id = 'notice'; notice.innerHTML = '<h1>Error Message</h1><br/>'; document.getElementsByTagName('main')[0].appendChild(notice); }); }
Ожидаемый результат: при ошибке обещания экран заполняется добавленным объектом DOM и остается до тех пор, пока пользователь не предпримет никаких действий. Предоставление пользователю возможности прочитать сообщение.
Фактические результаты: объект DOM добавляется к <main>
, заполняет экран и представляет сообщение, но исчезает в течение 2 секунд.
Вопрос: Как сделать так, чтобы действия, выполняемые в .catch(), сохранялись?
Элемент сохраняется, это css заставляет его исчезнуть. Анимация запускается один раз, останавливается, и мы возвращаемся к opacity: 0. Произойдет даже без JS:
<div id = "notice"></div>
#notice {
width: 100px;
height: 100px;
opacity: 0;
background: blue;
animation: fade-in 2s;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
https://codepen.io/anon/pen/YMNaMv?&editable=true
Чтобы #уведомление оставалось на экране, добавьте animation-fill-mode: forwards;
к его стилям.
Спасибо. Это сработало отлично, я потратил 2 часа на поиск решения. Я использовал те же свойства анимации/css для другого уведомления в том же приложении, и у меня не было этой проблемы. Даже не думал задавать вопросы CSS.
Я забыл добавить ключевые кадры в таблицу стилей:
@keyframes fade-in{0%{opacity:0;}100%{opacity: 1;}}