Это повторное сообщение истории, которую я ранее опубликовал и удален на среднем
Добавление переходов или анимаций на веб-страницу или приложение может быть хорошим способом взаимодействия пользователей и создать лучший пользовательский опыт. Но это может потребовать много работы и поддержание их. Воспользовавшись некоторыми основными функциями 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{{ text }}
Хорошо начинать избегать повторяющегося кода в компонентах, но есть еще проблема с необходимостью повторения начального связывания методов перехода.
Можно улучшить это и сделать его еще дальше.
Выделенный переходный компонент
Во избежание повторения связывания методов к переходным крючкам можно извлечь все <Переход>
в выделенный компонент. Теперь методы и привязки определяются в одном месте. Любые необходимые стили также могут пойти сюда, чтобы сохранить все прибор.
// SlideDownTransition.vue
Компонент теперь может использоваться вместо перехода в любом месте приложения, не повторяя никаких привязки или методов. Просто импортируйте, зарегистрируйтесь и используете его.
// MainComponent.vue{{ text }}
Компонент перехода представляет собой мощный инструмент в нем и в сочетании с некоторым стилем, он может охватывать многие случаи использования. Когда дело доходит до более продвинутых анимаций, переход к использованию крючков JavaScript делает это легко. Настоящий пример использует это для расчета высоты некоторого «динамического» контента, чтобы его можно было правильно анимировать.
Пример код – Доступно на Github Отказ
Это было довольно некоторое время (годы), так как я написал какой-либо статью, технический или академический, но я хочу поделиться некоторыми из моих знаний и опыта в этой области. Я надеюсь, что кто-то найдет это полезным в любом случае.
Оригинал: “https://dev.to/thomassjogren/reusable-transitions-with-vue-js-54cp”