Задать вопрос

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

Всем привет.

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

На своём проекте использую Vue, только вопрос какая логика такой анимации?
  • Вопрос задан
  • 817 просмотров
Подписаться 6 Простой 1 комментарий
Решения вопроса 1
Torin_Asakura
@Torin_Asakura
Lead Architect
В вашем примере речь идёт о простом 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
    }
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
14 дек. 2024, в 07:35
500 руб./за проект
14 дек. 2024, в 05:57
50000 руб./за проект
14 дек. 2024, в 02:49
500 руб./за проект