Aos: Vue Router and AOS

[mikerockett]

I've bumped into an issue where elements that were previously animated in disappear after returning to the view in which they reside, when using Vue Router.

In my case, I have elements on one page that animate in when the page loads for the first time (directly). I then navigate away from the page using $router.push and then navigate back to that page, and the elements are gone.

Resizing the browser seems to call the refresh method correctly, but if I call that same method after each router change, nothing happens. Perhaps this is a timing thing?

As an aside, Chrome is throwing the following warning regarding AOS:

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeRemoved' event. Consider using MutationObserver to make the page more responsive.

Your help would be most appreciated. :-)

[robabel]

+1 on the [Violation] synchronous DOM mutation listener...

[pmochine]

Would love to know an answer as well...

[michalsnik]

Hey @mikerockett Can you please confirm if the same thing happens with 2.3.0? There were some changes in MutationObserver there

[mikerockett]

Hey Michał – thanks for the update. I'm using another package for this functionality now, but will test in another project that has it installed, as soon as I get back to it.

[phpedinei]

I'm having problems with the vue-router as well. The first time it does the effect, when switching screen and back the elements go blank.

I'm using the 2.3.0
The bug happens in firefox, chrome and safari.

[molysama]

@phpedinei It maybe work at v2.2

[michalsnik]

Alright, I think nailed down the problem. Will release an update in 3.0.0-beta.4 in the next hour, as well as in 2.3.3 :)

[michalsnik]

Guys, please try [email protected] or aos@next. I fixed issue with MutationObserver in both of these versions :) If you'll still have some problems, please reopen this issue and let me know! :)

[richpollen]

Hey guys - I still get this bug with 3.0.0-beta.5. As soon as you go to another route and then come back, elements are missing, and even scrolling down the page doesnt bring them back for me

[brauerZbigniew]

aos works well, even if I use a vue-router, but I have a problem with
events: 'aos:is' and 'aos:out', because they do not fire at all.
Did I miss something?

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

new Vue({
  router,
  created () {
    document.addEventListener('scroll', () => {
        //
    });
    document.addEventListener('aos:in', ({ detail }) => {
        console.log('animated in', detail);
    });

    document.addEventListener('aos:out', ({ detail }) => {
        console.log('animated out', detail);
    });

    AOS.init();
},
  render: h => h(App)
}).$mount('#app')

[GeorgeZoum]

Is there any new features for Vuetify?