Как сгладить переход анимации в VueJS

Question

I wi sh для достижения плавного перехода из одного состояния в другое, состояние, указанное на изображении:

И конечное состояние:

Вот временный рабочий Codepen: Ссылка Codepen

 <transition name="fade">
      <h1 v-if="!searchStatus">{{heading}}</h1>
    </transition>

Есть ли способ сглаживания перехода.

Answer 1

Переходы, встроенные в Vuetify, очень, очень просты и не предназначены для той хореографической анимации, которую вы пытаетесь создать. Они предназначены для отображения или скрытия элемента, перемещения между вкладками в области вкладок и т. Д. c. (т.е. анимация одного элемента) и не предназначена для координации изменений, происходящих между несколькими элементами. К сожалению, как говорится в этом сообщении в блоге «для великолепных анимаций нет серебряной пули».

Я предлагаю вам не пытаться полагаться на встроенные переходы Vuetify здесь, но вместо go для простой CSS стратегии, основанной на ключевых кадрах (вот старое, но достойное введение в подход ). В качестве альтернативы, если вы хотите использовать инструмент, созданный специально для анимации, GSAP примерно настолько же близок к отраслевому стандарту, насколько это возможно, хотя это может быть излишним для сценария, который вы описали.