Стратегии для переходов веб-страниц

Question

Я искал в Интернете поиски переходов веб-страниц.Традиционно изменения в содержании основывались на: index.html> nextpage.html.Тем не менее, я видел несколько действительно хороших демонстрационных переходов, которые называются «переходами веб-страниц», но почти все они содержат визуальные манипуляции с элементами страницы, такие как: old.element> эффект перехода> new.element, в то время как страница остается прежней(т.е. всегда index.html).Для меня это на самом деле не переходы страниц, потому что демонстрации не содержат реального контента - просто строка или около того.Хотя они выглядят хорошо, я не понимаю, как они могли бы работать с реальным контентом (скажем, 150 строк кода, объекты aspx, новые JS-скрипты, код и т. Д.)

Итак, мои вопросы:

1. Неправильно ли я ищу переходы традиционного стиля?
2. Есть ли что-то принципиально правильное в этих переходах элементов?
3. Можно ли сделать эти переходы типов элементов для хранения серьезного контента?

Причина Q3. В том, что я не могу представить, что десять страниц реального контента обрабатываются одной страницей default.aspx.Или я что-то здесь упускаю?Любой совет будет принята с благодарностью.С наилучшими пожеланиями - Питер

Answer 1

Решение проблемы «мигания» при переходах на страницы, если вы воспользуетесь предложенным выше подходом Акаша, заключается в следующем:

1. Цвет всех темных элементов, которые «вспыхивают» на белом фоне во время загрузки страницы)как белый
2. Сделать темные изображения, используемые в качестве линий (например, изображения 1px, обычно устанавливаемые на 100%), шириной 1px

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

<script>
    $(document).ready(function () {
        document.getElementById("change01").style.color = "#2E333C";
        document.getElementById("change02").style.color = "#2E333C";
        document.getElementById("change03").style.color = "#2E333C";
        document.getElementById("change04").style.color = "#2E333C";
        document.getElementById("change05").style.color = "#2E333C";
        document.getElementById("change06").style.color = "#2E333C";
        document.getElementById("change07").style.width = "100%";
    });
</script>

Элементы вернут свои правильные атрибуты после загрузки страницы без прошивки.Это так быстро, что такие вещи, как постепенное увеличение, увеличение и т. Д. По-прежнему работают хорошо.

Answer 2

Похоже, вы нашли одностраничные приложения (SPA), которые используют переходы страниц.SPA используют один HTML-файл и изменяют содержимое страницы, используя JS, некоторые платформы: React , Ember , Angular

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