使用aos动画库让其滑到页面位置再加载相应动画解决提前加载的情况。

Posted 2022-08-29 五花肉三七分

一：问题描述

1. 想要滑到相应位置之后再加载动画，但是设置完显示过渡时间后，动画仍会提前加载。

二：解决思路

1. dom渲染
2. 生命周期

三：代码展示

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

我们都知道使用aos时，我们先要引入aos，然后在使用aos动画的页面的生命周期里进行一次初始化，然后就可以使用aos了。但是单纯这样使用，等适配到手机端后，在手机上看页面，等你滑到有动画了地方，你看到的有可能是它已经加载完动画。（实际上再手动刷新一下页面就好了）。然后我就想着等进入页面后再让它自动刷新一下页面，代码如下：

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

然并没卵用，手动刷新就行，前端实现刷新不行，就emo...然后我就看着页面一点一点的试，最后发现了，当页面进行了dom渲染时，然后再搭配vue的beforeUpdate，updated生命周期后，后面的页面竟然正常显示了，代码如下：

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

这样就好了，，，

四：总结

使用插件方便的同时也限制了自由度。