Hotwired Turbo  —  создание анимации между посещениями страницы.

Может быть, кто-то найдет это полезным. Я пытался создать красивые и простые переходы между страницами на своем веб-сайте.

Элемент для анимации: #container
Класс анимации: .animated

CSS:

.animated {
    animation: fadeIn 500ms;
}

JavaScript (с jQuery):

document.addEventListener('turbo:before-render', async (event) => {
    event.preventDefault()
       if (!$(event.detail.newBody).hasClass('animated') && !$('#container').hasClass('animated')) {
        await animateIn(event.detail.newBody)
    }
    event.detail.resume()
})

document.addEventListener('turbo:visit', (event) => {

    if ($('#container').hasClass('animated')) {
        $('#container').removeClass('animated')
    }
})
const animateIn = function(body) {
        $(body).find('#container').addClass('animated')
}