Как использовать Vue.js с Animate On Scroll

Анимация при прокрутке (AOS) - довольно приятная библиотека, которая позволяет анимировать при прокрутке страницы вниз. Вот краткое руководство по использованию AOS с Vue.js.

Если вы еще не настроили свой проект Vue.js, я настоятельно рекомендую использовать этот шаблон Vue.js. Это довольно круто.

Во-первых, нам нужно добавить AOS к нашим зависимостям. Запустите npm install --save aos@next на своем терминале.

После завершения установки добавьте следующее в ваш основной файл Javascript (для меня main.js).

import AOS from 'aos'
import 'aos/dist/aos.css'

Затем нам нужно инициализировать AOS. Если вы использовали шаблон, который использовал я, добавьте created(){AOS.init()} в новую часть Vue файла main.js, чтобы он выглядел так:

new Vue({
  created () {
    AOS.init()
  },
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

На этом установка завершена! В вашем Home.vue папки компонентов попробуйте добавить data-aos="fade" в один из ваших HTML-элементов, чтобы добавить крутое затухание анимации при прокрутке элемента! Для получения дополнительной информации прочтите документацию! Поздравляю, теперь вы можете добавить кучу потрясающих анимаций в свое приложение Vue.js!