🦉 Анимация 🦉

Анимация это комплексаня тема. В ней много различных сценариев, и много решений и технологий. Owl поддерживает только базовые сценарии.

Простые CSS эффекты

Иногда использвание простого CSS более чем достаточно. В таких случаев отсуствует реальная необходимсоть использовать Owl все что требуется - это отрендерить DOM элемент с необходимым классом. Например:

<a class="btn flash" t-on-click="doSomething">Click</a>

Со следующим CSS:

btn {
  background-color: gray;
}

.flash {
  transition: background 0.5s;
}

.flash:active {
  background-color: #41454a;
  transition: background 0s;
}

что создасть прятный эффект, когда пользователь нажимаем кнопку или клавишу на клавиатуре

CSS переходы

Более сложная ситуация может возникнуть если нам надо вывести элемент на страницу или убрать его. Например, нам может понадобиться эффект постепенного появления и исчезновения.

Директива t-transition призвана помочь нам в этом. Он работает с элементами html и компонентами, добавляя и удаляя некоторые классы css.

Чтобы выполнять полезные эффекты перехода, всякий раз, когда элемент появляется или исчезает, необходимо добавить/удалить какой-либо стиль или класс css в определенный момент жизни узла(ноды). Поскольку это непросто сделать вручную, директива Owl t-transition поможет вам.

Всякий раз, когда узел имеет директиву t-transition со значением name, происходит следующая последовательность событий:

При вставке узла(ноды):

• css классы name-enter и name-enter-active будут добавлены когда узел будет вставлен в DOM.
• на следующем кадре анимации: класс css name-enter будет удален и класс name-enter-to будет добавлен (поэтому их можно использовать для запуска эффектов перехода css).
• в конце перехода, name-enter-to и name-enter-active будут удалены.

При удалении узла(ноды):

• css классы name-leave и name-leave-active будут добавлены перед удалением узла из DOM.
• на следующем кадре анимации: класс css name-leave будет удален и класс name-leave-to будет добавлен (поэтому их можно использовать для запуска эффектов перехода css).
• в конце перехода, name-leave-to и name-leave-active будут удалены.

Например, просто

Например, простой эффект появления/затухания можно сделать следующим образом:

<div>
    <div t-if="state.flag" class="square" t-transition="fade">Hello</div>
</div>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

Директива t-transition может быть применена к элементу узла(ноды) или к компоненту

Примечание:

Owl не поддерживает более одного перехода для узла(ноды), поэтому выражение должно быть единичным значением t-transition (т.е. no space allowed).

SCSS Миксины

Если вы используете SCSS, то вы можете использовать миксины для создания генерации анимаций. Вот пример с появлением/затуханием:

@mixin animation-fade($time, $name) {
  .#{$name}_fade-enter-active,
  .#{$name}_fade-active {
    transition: all $time;
  }

  .#{$name}_fade-enter {
    opacity: 0;
  }

  .#{$name}_fade-leave-to {
    opacity: 0;
  }
}

Использование:

@include animation-fade(0.5s, "o_notification");

Теперь вы можете исползовать ее в своем шаблоне:

<SomeTag  t-transition="o_notification_fade"/>