Переходы страниц
Встроенный движок переходов страниц. Простой концепт — переключая страницу мы избирательно меняем ее контент вручную, при этом не перезагружая панели без необходимости.
cb.system.addEventListener('pageAnimation', async e => {
// если страницы "системы управления сайтом", ничего не делаем
if (cb.system.isCms()) return
const {view, shift, complete} = e.detail
// для остальных страниц меняем контент вручную, панели не трогаем
cb.view.querySelector('main').innerHTML = view.querySelector('main').innerHTML
// обновляются style.css и script.js прежней страницы на новые.
shift()
// обновляется url
complete()
})
Усложним задачу добавив анимации. Последовательность исполнения:
- Анимации с прежним контентом
(fadeOut)с ожиданием. - Обновление контента через
innerHTMLи одновременное исполнениеshift() - Анимации с новым контентом
(fadeIn)и одновременное завершениеcomplete()
const opt = {duration: 90, fill: 'forwards'}
cb.system.addEventListener('pageAnimation', async e => {
// если страницы "системы управления сайтом", ничего не делаем
if (cb.system.isCms()) return
const {view, shift, complete} = e.detail
if (cb.system.isPath('/docs/*')) {
// для страниц документации
// 1
const el = cb.view.querySelector('.docs-content')
await el.animate({opacity: [0]}, opt).finished
// 2
window.scroll({top: 0, behavior: 'instant'})
el.innerHTML = view.querySelector('.docs-content').innerHTML
shift()
// 3
el.animate({opacity: [1]}, opt)
} else {
// для всех остальных страниц анимации нет
cb.view.querySelector('main').innerHTML = view.querySelector('main').innerHTML
shift()
}
complete()
})