Use the aos animation library to let it slide to the page position and then load the corresponding animation to solve the situation of early loading.

One: Problem description

1. I want to load the animation after sliding to the corresponding position, but after setting the display transition time, the animation will still be loaded in advance.

Two: Solutions

1. dom rendering
2. life cycle

Three: Code display

 mounted() {
          AOS.init({
            offset: 120,
            duration: 1200,   //持续时间
            easing: 'ease-in-sine',
            delay: 150,
            once:true,
          })
  },

We all know that when using aos, we must first introduce aos, and then initialize once in the life cycle of the page using aos animation, and then we can use aos. But just use it like this, after it is adapted to the mobile phone, look at the page on the mobile phone, and when you slide to the place where there is animation, what you see may be that it has finished loading the animation. (In fact, just refresh the page manually). Then I thought about letting it refresh the page automatically after entering the page. The code is as follows:

 if(location.href.indexOf("#home")==-1){
        location.href=location.href+"#home";
        location.reload();
    }

However, it is useless , manual refresh is enough, the front-end refresh is not good, just emo... Then I looked at the page and tried it bit by bit, and finally found out that when the page is rendered by dom, then it is matched with vue After the beforeUpdate and updated life cycles, the following pages are displayed normally, the code is as follows:

v-if="showIntroduction"//在页面最上方（放在最上方能让下面的动画正常显示）对某个div进行一下v-if，
                         //我们都知道，当v-if是页面会重新渲染，然后就会触发vue的
                        //beforeUpdate，updated生命周期
                         //v-if的判断条件自己随意发挥
//然后在该生命周期里重新初始化一下
updated(){
      this.$nextTick(() => {   //页面渲染完，在执行
          AOS.init()
    })
  },

That's fine,,,

Four: Summary

While the use of plug-ins is convenient, it also limits the degree of freedom.