Здравствуй, Хабр! Начать свою деятельность решил с перевода на русский статей, который мне самому принесли большую пользу. Надеюсь, вам пригодятся. Отмечу, что я старался переводить литературно, а не дословно.


Первым вашему вниманию представляю перевод статьи «Vue.js render functions and transitions» автора Hajime Yamasaki Vukelic.

Vue.js render-функции и переходы

Документация Vue.js в отношении render-функций оставляет желать лучшего. Для пользователей, которые используют JSX с render-функциями, это может создать проблемы. В данной статье мы рассмотрим как создать переходы в этом конкретном сценарии.

Я использую JSX в примерах, но все это работает и с простыми функциями рендеринга JavaScript, так как JSX является просто синтаксическим сахаром для вызовов h (). Если вы хотите узнать больше об этой теме, посмотрите эту статью.

Как работают переходы в общем случае

Суть переходов заключается в том, что у вас есть встроенный компонент transition, который назначает классы элементам, которые монтируются (enter) или демонтируются (leave).

Танец пикабу

Главный нюанс: как определить место монтажа или демонтажа элементов. Эту проблему можно решить несколькими способами.

Вы можете использовать тернарный оператор для реализации появления/исчезновения элемента:

render(h) {
  <transition>
    {this.showDiv ? <div class="myDiv">Hello</div> : null}
  </transition>
}

или для замены одного элемента другим:

render(h) {
  <transition>
    {this.showOneOrTheOther
       ? <div class="myDiv">Hello</div> 
       : <div class="myOtherDiv">Hello again</div>
    }
  </transition>
}

Нет, я просто пошутил. Конечно вы не можете использовать тернарный оператор без дополнительных параметров для замены таких элементов. Однако, тут есть нюанс. Алгоритм сравнения решает, что там уже есть элемент, поэтому вместо удаления его из DOM он просто исправляет его, чтобы он выглядел как другой элемент.

Будет лучше если вы используете key при замене элементов:

render(h) {
  <transition>
    {this.showOneOrTheOther
       ? <div key="myDiv" class="myDiv">Hello</div> 
       : <div key="myOtherDiv" class="myOtherDiv">Hello again</div>
    }
  </transition>
}

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

Аналогично, если вы хотите поменять местами компонент или элемент с другой этого же компонента/элемента:

render(h) {
  <transition>
    <div key={this.subcomponentKey}>
      <MyComponent />
    </div>
  </transition>
}

В приведенном выше примере метод this.subcomponentKey собирается каким-то образом рассчитать соответствующий ключ для компонента MyComponent.

Ключевые отличия

Пока мы говорим о ключах, помните, что элементы / компоненты всегда отображаются полностью при изменении ключа. С другой стороны, пока ключ остается тем же самым, элементы / компоненты не меняются.

Не позволяйте этому застать вас врасплох. Прежде чем случайно добавить ключ практически ко всему, что движется (или должно двигаться), тщательно подумайте, каким должно быть значение этого ключа. Сначала проверьте без ключа, запишите результаты, а затем добавьте ключ и посмотрите, сможете ли вы повторить тот же эффект. Если пользовательский интерфейс не будет обновляться, вы, вероятно, выбрали неверное значение ключа.

Добавление анимации

Теперь, когда мы знаем, как заставить наши элементы уходить и возвращаться, пришло время поработать над анимацией.

В простейшем случае у нас есть два класса. Один класс применяется всегда, а другой применяется, когда элемент / компонент собирается смонтирован или демонтирован.

// my.css
.base {
  transition: transform 1s;
}
.out {
  transform: translateX(-100vw);
}

Теперь добавим эти классы в код:

render(h) {
  <transition enter-class="out" leave-to-class="out">
    {this.someProp ? <div class="base">Hello</div> : null}
  </transition>
}

Эти классы (enter-class и leave-to-clas ) хорошо описаны в документации. Читайте о них там.

Класс enter-class служит хранилищем для стилей, которые применяются сразу после монтирования элемента. Сразу после этого класс удаляется. Мы добавляем переходы для создания анимации между временем применения класса enter-class и временем, когда его нет (когда применяется только класс .base).

Класс leave-to-class применяется непосредственно перед удалением элемента. Затем Vue.js ожидает завершения анимации, а затем удаляет элемент из дерева DOM. Опять же, мы используем переходы для создания анимации.

В нашем примере мы использовали один и тот же класс .out для входа и выхода, но мы можем использовать разные классы для двух событий.

Заключение

Надеюсь, теперь вы понимаете ключевые концепции переходов Vue.js при использовании в функциях рендеринга и с JSX. Тем не менее, переходы Vue.js предлагают гораздо больше возможностей, например, возможность подключаться к событиям перехода с помощью JavaScript и, следовательно, делать даже некоторые вещи, не связанные с анимацией (вроде как ловушки жизненного цикла). Я закончу статью здесь, и оставлю эксперименты моим дорогим читателям.

Счастливого взлома!