5 минут, чтобы изучить анимационные эффекты Vue

JavaScript Vue.js Vuex CSS vue-router SCSS

1. Какие элементы/компоненты подходят для анимации в данных условиях

  • Условный рендеринг (с использованием v-if)
  • Условное отображение (с помощью v-show)
  • динамические компоненты
  • корневой узел компонента

имя класса перехода

Простой пример: (текст скрыт, чтобы показать эффект)

<div>
  <button @click="show = !show">show toggle</button>
  <transition name="fade">                              //fade 自定义名称
    <p v-if="show">hello</p>
  </transition>
</div>

<style>
.fade-enter-active, .fade-leave-active{                 //指就是html中fade名称
  transition: opacity .5s;                              0.5s动画过渡的时间
}
.fade-enter, .fade-leave-to {           
  opacity: 0;
}
</style>

запустить онлайн

параметр имени класса перехода

  • v-enter: определяет начальное состояние перехода входа. Вступает в силу до вставки элемента и удаляется в следующем кадре после вставки элемента.

  • v-enter-active: определяет состояние, когда переход ввода вступает в силу. Применяется на протяжении всего перехода входа, вступает в силу до вставки элемента и удаляется после завершения перехода/анимации. Этот класс можно использовать для определения времени процесса перехода входа, задержек и функций кривой.

  • v-enter-to: Версия 2.1.8 и выше Определяет конечное состояние перехода ввода. Вступает в силу в следующем кадре после вставки элемента (при одновременном удалении v-enter), удаляется после завершения перехода/анимации.

  • v-leave: определяет начальное состояние перехода выхода. Вступает в силу немедленно, когда запускается переход выхода, и удаляется в следующем кадре.

  • v-leave-active: определяет состояние, когда активен переход выхода. Применяется в течение всей фазы перехода при выходе, вступает в силу сразу после запуска перехода при выходе и удаляется после завершения перехода/анимации. Этот класс можно использовать для определения времени обработки, задержек и функций кривых для выходных переходов.

  • v-leave-to: Версия 2.1.8 и выше Определяет конечное состояние перехода выхода. Следующий кадр вступает в силу после того, как запущен переход leave (и одновременно удаляется v-leave), и удаляется после завершения перехода/анимации.

Я сам нарисовал жизненный цикл анимации перехода, указав: начало анимации, процесс, конец, допустимое и недопустимое имя класса.

image.png

скрыть, чтобы показать, показать, чтобы скрыть процесс

image.png

css анимация

<div>
  <button @click="show = !show">show toggle</button>
  <transition name="fade">  //fade 自定义名称
    <p v-if="show">hello</p>
  </transition>
</div>

<style>
.fade-enter-active {        //类名：隐藏到显示过程所需要的时间
  animation: bounce-in .5s;
}
.fade-leave-active {        //类名：显示到隐藏过程所需要的时间
  animation: bounce-in .5s reverse;     //reverse表示和隐藏到显示动画相反
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

запустить онлайн

Пользовательское имя класса перехода

Внедрить стороннюю библиотеку cssAnimate.css

Узнав об этом, мы можем обратиться к сторонним библиотекам для достижения этого эффекта.Animate.css

// 在index.html文件下引入Animate.css
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
// 在组件内
<div>
  <button @click="show = !show">show toggle</button>
  <transition  
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight" >
    <p v-if="show">hello</p>
  </transition>
</div>

запустить онлайн

Если вы сталкивались с анимацией CSS, у вас может возникнуть проблема.Если время перехода и время анимации CSS несовместимы, то это время следует использовать в качестве стандарта.

Итак, вводится следующий вопрос Затем вам нужно использовать атрибут type и установить анимацию или переход, чтобы явно объявить тип, который вы хотите, чтобы Vue прослушивал.

Также можно установить явную продолжительность перехода

<transition :duration="{ enter: 500, leave: 800 }">...</transition>     //以毫秒计算

Используя этот метод, Vue может автоматически получить время завершения эффекта перехода. По умолчанию Vue будет ждать своего первого события transitionend или animationend в корневом элементе эффекта перехода. Однако его можно установить и по-другому — например, у нас может быть хорошо поставленная серия переходов, в которой некоторые вложенные внутренние элементы имеют задержанные или более длинные переходы, чем корневой элемент перехода.

использованная литература

Официальная документация Vuejs

Категории