Как сделать такой эффект?

Question

[myskypesla]

Всем привет.

Есть сайт redcollar.ru, при нажатии, к примеру сюда prntscr.com/hv6kwd, происходит расширение картинки на весь экран и загружается новая страница. Вот так и мне нужно сделать, маленькую картинку открыть на весь экран и внизу подгрузить много текста, как отдельную страницу.

На своём проекте использую Vue, только вопрос какая логика такой анимации?

Comments

[triggerfinger]

Как-то привязывать анимацию компонентов к vue-router

Answer 1

[Andrew Ghostuhin]

В вашем примере речь идёт о простом expandBlock с использованием директивы transition.
Фишка в том, что текст изначально подгружен и живёт в доме, "слушать" изменения дом-ноды в данном случае нет необходимости и что-то грузить после инициализации объекта.
Нужно просто:
- подгружать объекты в дом
- дождаться коллапс/экспанд
- отдать уже подгруженный контент

Vue.directive('expand', {
    inserted: function(el, binding)
    {
        if (binding.value !== null)
        {
            function calcHeight()
            {
                const currentState = el.getAttribute('aria-expanded')

                el.classList.add('u-no-transition')
                el.removeAttribute('aria-expanded')
                el.style.height = null
                el.style.height = el.clientHeight + 'px'
                el.setAttribute('aria-expanded', currentState)

                setTimeout(function()
                {
                    el.classList.remove('u-no-transition')
                })
            }

            el.classList.add('expand')
            el.setAttribute('aria-expanded', (binding.value) ? 'true' : 'false')
            calcHeight()
            window.addEventListener('resize', calcHeight)
        }
    },
    update: function(el, binding)
    {
        if (el.style.height && binding.value !== null)
        {
            el.setAttribute('aria-expanded', (binding.value) ? 'true' : 'false')
        }
    },
})

var app = new Vue({
    el: '#app',
    data: {
        isExpanded: false
    }
})

Comments

[myskypesla]

Andrew Ghostuhin спасибо большое за развёрнутый ответ. Реализовал до того, как увидел ответ немного другим способом, а именно: поднимаю вверх блок с использованием transition и затем делаю переход на другой router, который изначально также выглядит, но внизу в зависимости от того, куда я перешёл, подргужается разный контент.

[Andrew Ghostuhin]

myskypesla, можно просто отметить решением и поставить лайк)

[myskypesla]

Andrew Ghostuhin, уже. Забыл :)