Заменить элемент на клик

Question

При разработке приложений для Android через телефонную таблицу с использованием html при переключении страниц происходит заметное мерцание. Это вызвано загрузкой в ​​новый html-файл.

Можно ли избежать этого, заменив элемент на щелчок и затухание?

Я не против использования Javascript или JQuery, но я не могу найти способ использовать только html и css.

Я в основном создаю интерактивную историю/книгу для детей. Таким образом, нажатие кнопок goback или goforth будет загружаться в новом контенте, без нажатия кнопок.

Answer 1

Возможно, лучше всего понять, что вызывает ваше мерцание, но поскольку вы не дали нам никакой информации, мы не можем сказать об этом.

Это довольно легко заменить элемент с простым JavaScript:

function replaceElem(origElem, newElem) { 
    var parent = origElem.parentNode; 
    parent.insertBefore(newElem, origElem); 
    parent.removeChild(origElem); 
} 

Если вы хотите, чтобы исчезнуть новый элемент, вы можете сделать это с переходом CSS или библиотекой, которая поддерживает анимацию.

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

---

Один простой способ просто иметь оба набора HTML в исходной странице:

<div id="page1" class="page"> 
    <div>Other HTML here</div> 
</div> 
<div id="page2" class="page" style="display: none;"> 
    <div>Other HTML here</div> 
</div> 

А, то вы можете скрыть показать только конкретную страницу, как это:

function showPage(id) { 
    // hide all pages 
    var pages = document.querySelectAll(".page"); 
    for (var i = 0; i < pages.length; i++) { 
     pages.style.display = "none"; 
    } 
    // show one particular page 
    document.getElementById(id).style.display = "block"; 
} 

// show page 2 
showPage("page2");