Сделать более быструю анимацию внутри другой анимации на Vue

У меня есть вот такой переход (как на первой гифке), сделанный с помощью Vue.js (v-if и т.п.). Мне нужно, чтобы вот эта миниатюра картинки исчезала быстрее чем идет основной переход (т.к. при более узком экране, как я понял, она не дает выехать шторке и анимация становится рваной как на второй гифке). Пробовал обернуть картинку в отдельный , с более короткой анимацией, не вышло. Думал еще с помощью jQuery сделать исчезновение, но хочется на вью...

Первая гифкка (без глюков)

первая гифка

Вторая гифка (с глюками)

вторая гифка

Сам сайт: http://featherdesign.realnost.club/


Ответы (1 шт):

Автор решения: Дмитрий Степовой

IMHO.

Судя по первой гифке, если обратить внимание на блок с текстом справа, то видно, что при анимации текст сжимается, соответственно анимация исчезновения блока сделана не изменением left/margin-left + width, а банальным transform: scaleX.

Попробуйте изменить. Потому что глюки появляются при переносе текста и других элементов разметки при изменении размеров родительского блока (белого).

→ Ссылка