Почему плагин AOS не работает при загрузке страницы, а только при прокрутке?

Question

[ekzotika]

Я пытаюсь заставить плагин AOS работать при загрузке страницы, чтобы элементы также появлялись плавно. Но это не работает. При загрузке страницы все что есть в зоне видимости появляется сразу как обычно, а уже при прокрутке все остальное работает как надо. Я использую Vue 2 + Nuxt 2.

aos.js

import Vue from 'vue';
import AOS from 'aos';
import 'aos/dist/aos.css';

class AosPlugin {
  config = {}

  install(Vue) {
    AOS.init(this.config)

    Vue.mixin({
      updated() {
        this.$nextTick(function () {
          AOS.refreshHard() // This is needed to avoid the un-animate aos effect
        })
      }
    })
  }
}

Vue.use(new AosPlugin())

index.vue

<template>
  <div class="main-page container">
    <h1 data-aos="fade-up" data-aos-delay="300">Типография "Синтезис"</h1>

    <div class="products" data-aos="fade-up" data-aos-delay="300">
      <nuxt-link :to="'/calc/' + product.slug" v-for="(product, index) in products.models" :key="product.id"
                 class="product"
                 data-aos="fade-up"
                 :data-aos-delay="200 + index*100">
        <h3>{{ product.name }}</h3>
        <div class="rectangle-home">
          <img :src="product.image_large" alt=""/>
        </div>
      </nuxt-link>

    </div>
  </div>
</template>


<script>
import {TypographyProductCollection} from "@/models/typography";
import {loadingMixinPage} from "@/mixins";

export default {
  mixins: [loadingMixinPage],
  data() {
    return {
      products: new TypographyProductCollection(),
    }
  },
  created() {
    this.addLoading();
    this.products.fetch().finally(() => this.removeLoading());
  },
  mounted() {
    import('aos').then(AOS => AOS.init());
  }
}
</script>

Answer 1

[zhlidro]

Вопрос уже старый, но отвечу.
У меня была похожая проблема и прикол в том, что плавное появление при открытии страницы заработало только тогда, когда я css перетащил в head, а скрипт с инициализацией вниз. При этом плавное появление при прокрутке прекрасно работало.