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