Как я могу анимировать элемент в сетке, чтобы при щелчке развернуться на весь экран? [VueJS]
У меня есть "сетка" постов в блоге в приложении Vue, которую нужно анимировать по щелчку, чтобы развернуть на весь экран в виде одного поста. Он должен вырасти из той же позиции, в которой "миниатюра" или "предварительный просмотр" находились в сетке, когда развернется до полного экрана, а затем снова опуститься туда, где он был в сетке.
(Другое намерение состоит в том, что каждый пост в блоге будет его собственным маршрутом, так что вы можете перейти к нему извне)
Вещи, с которыми я столкнулся, пытаясь реализовать это:
Я попытался использовать тот же элемент и просто анимировать его так:
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
... и т.д., когда он расширен, но вы не можете оживить position имущество.
Таким образом, мои посты уже должны быть абсолютно позиционированы перед переходом, иначе он просто прыгнет и не будет анимирован. Однако я действительно не хочу абсолютно позиционировать элементы в сетке, которые автоматически генерируются из цикла v-for в Vue.
Я видел несколько решений, в которых есть сетка, а затем полная публикация скрыта на странице, и ее непрозрачность исчезает при нажатии, но это решение требует отслеживания смещения прокрутки, чтобы создать впечатление, будто оно выросло из эскиза в сетке.
Надеюсь, я достаточно хорошо проиллюстрировал проблему, чтобы понять, какую задачу я пытаюсь решить. Если у кого-то есть опыт анимации чего-то подобного в Vue или React, это будет полезно. Спасибо!
РЕДАКТИРОВАТЬ: чтобы быть ясным, я обработал часть состояния приложения Vue, так что в настоящее время я могу получить анимацию, когда я нажимаю на свои сообщения (только не правильные), основной вопрос, более вероятно, CSS вопрос в рамках VueJS.