Интеграция с Vue

Для использования AOS в проекте на Vue необходимо установить библиотеку через npm или yarn:

npm install aos --save

или

yarn add aos

После установки подключение AOS выполняется в основном файле приложения, чаще всего это main.js или main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import AOS from 'aos';
import 'aos/dist/aos.css';

const app = createApp(App);

// Инициализация AOS с базовыми настройками
AOS.init({
  duration: 800,       // Длительность анимации в миллисекундах
  once: true,          // Анимация срабатывает один раз при скролле
  easing: 'ease-in-out' // Тип кривой ускорения
});

app.mount('#app');

Использование директив в компонентах Vue

Чтобы добавить анимацию элементу, достаточно использовать атрибут data-aos. В Vue компонентах это выглядит следующим образом:

<template>
  <div class="card" data-aos="fade-up">
    <h2>Заголовок</h2>
    <p>Описание анимированного блока.</p>
  </div>
</template>

Можно комбинировать несколько атрибутов для более гибкой настройки:

<div
  class="card"
  data-aos="fade-left"
  data-aos-offset="200"
  data-aos-delay="300"
  data-aos-duration="1000"
  data-aos-easing="ease-in-out"
  data-aos-once="false"
>
  Контент блока
</div>

Описание основных атрибутов:

  • data-aos — тип анимации (fade, fade-up, fade-down, flip-left, zoom-in и т.д.).
  • data-aos-offset — смещение срабатывания анимации от верхнего края экрана в пикселях.
  • data-aos-delay — задержка перед началом анимации (в миллисекундах).
  • data-aos-duration — длительность анимации.
  • data-aos-easing — кривые ускорения (ease, linear, ease-in, ease-out).
  • data-aos-once — если true, анимация срабатывает только один раз при скролле вниз.

Инициализация и обновление AOS в компонентах

В SPA на Vue часто возникает необходимость повторной инициализации AOS при динамическом рендеринге компонентов. Для этого используется метод refresh:

import { onMounted, nextTick } from 'vue';
import AOS from 'aos';

export default {
  setup() {
    onMounted(() => {
      nextTick(() => {
        AOS.refresh();
      });
    });
  }
}
  • onMounted гарантирует, что DOM уже существует.
  • nextTick обеспечивает выполнение AOS.refresh() после завершения всех реактивных обновлений.

Для компонентов, которые динамически добавляют элементы при изменении данных, можно вызвать AOS.refreshHard() для полной переработки всех анимируемых элементов.

Использование AOS с динамическими списками

При работе с v-for важно, чтобы каждый элемент списка имел уникальный ключ:

<template>
  <div v-for="item in items" :key="item.id" data-aos="fade-up">
    {{ item.title }}
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue';
import AOS from 'aos';

export default {
  setup() {
    const items = ref([]);

    onMounted(async () => {
      items.value = await fetchItems(); // загрузка данных
      nextTick(() => AOS.refresh());
    });

    return { items };
  }
}
</script>

Без nextTick вызов AOS.refresh() может произойти до рендеринга элементов, и анимация не сработает.

Настройка глобальных параметров через Vue

Для удобства можно создать плагин Vue для централизованной настройки AOS:

// plugins/aos.js
import AOS from 'aos';
import 'aos/dist/aos.css';

export default {
  install(app, options = {}) {
    app.config.globalProperties.$aos = AOS;
    AOS.init({
      duration: 1000,
      easing: 'ease-in-out',
      once: true,
      ...options
    });
  }
};

Подключение плагина в main.js:

import { createApp } from 'vue';
import App from './App.vue';
import AOSPlugin from './plugins/aos';

const app = createApp(App);

app.use(AOSPlugin, { duration: 1200, once: false });

app.mount('#app');

Теперь доступ к AOS возможен через $aos в любом компоненте:

this.$aos.refresh();

Адаптивная анимация и условное применение

Иногда требуется отключать анимации на мобильных устройствах. AOS поддерживает опцию disable:

AOS.init({
  disable: function() {
    return window.innerWidth < 768; // отключить анимацию на устройствах <768px
  }
});

Также можно условно добавлять атрибут data-aos в шаблоне:

<div :data-aos="isDesktop ? 'fade-up' : null">
  Контент
</div>

Комбинирование с другими библиотеками

AOS хорошо сочетается с Vue Transition и Vue Router. Для анимации переходов между страницами можно вызывать AOS.refresh() после навигации:

import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import AOS from 'aos';

export default {
  setup() {
    const router = useRouter();

    router.afterEach(() => {
      AOS.refresh();
    });
  }
}

Это обеспечивает корректное срабатывание анимаций на новых маршрутах без перезагрузки страницы.

Оглавление