Рубрики
Без рубрики

Многоразовые переходы с Vue.js

Повторное использование переходов с пользовательскими компонентами. Теги от Vue, JavaScript, анимации.

Это повторное сообщение истории, которую я ранее опубликовал и удален на среднем

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

Создание переходов в Vue.js может быть так же просто, как и используя встроенный <Переход> компонент. Укажите имя и используйте, что в стиле для создания перехода или анимации. Официальная документация Vue.js Объясняет это очень хорошо.

Чтобы получить больше контроля над переходным компонентом, Vue.js предоставляет Набор крючков JavaScript . Это позволяет легко использовать другие библиотеки или пользовательский код и отличный случай для извлечения этих методов в микну, который можно повторно использовать в компонентах.

// The transition mixin
export default {
  methods: {
    beforeEnter(el) {
      el.style.height = '0';
    },
    enter(el) {
      el.style.height = `${el.scrollHeight}px`;
    },
    leave(el) {
      el.style.height = '0';
    },
  },
};

Импортируйте и зарегистрируйте микну в компоненте. Затем установите методы с переходными крючками, и он готов к использованию.

// SomeComponent.vue



Хорошо начинать избегать повторяющегося кода в компонентах, но есть еще проблема с необходимостью повторения начального связывания методов перехода.

Можно улучшить это и сделать его еще дальше.

Выделенный переходный компонент

Во избежание повторения связывания методов к переходным крючкам можно извлечь все <Переход> в выделенный компонент. Теперь методы и привязки определяются в одном месте. Любые необходимые стили также могут пойти сюда, чтобы сохранить все прибор.

// SlideDownTransition.vue





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

// MainComponent.vue





Компонент перехода представляет собой мощный инструмент в нем и в сочетании с некоторым стилем, он может охватывать многие случаи использования. Когда дело доходит до более продвинутых анимаций, переход к использованию крючков JavaScript делает это легко. Настоящий пример использует это для расчета высоты некоторого «динамического» контента, чтобы его можно было правильно анимировать.

Пример код – Доступно на Github Отказ

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

Оригинал: “https://dev.to/thomassjogren/reusable-transitions-with-vue-js-54cp”