正文

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

五花肉三七分  五花肉三七分  2023-04-01  409

关键词：

一：问题描述

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

二：解决思路

dom渲染
生命周期

三：代码展示

 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()
    )
  ,

这样就好了，，，

四：总结

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

jquery插件aos.js

...。在页面往回滚动时，元素会恢复到原来的状态。　使用方法：　在页面中引入aos.css文件,jquery和aos.js文件1<linkrel="stylesheet"href="dist/aos.css"/>2< 查看详情

android动画使用开源动画库nineoldandroids

Android系统支持原生动画，这为应用开发者开发绚丽的界面提供了极大的方便，有时候动画是很必要的，当你想做一个滑动的特效的时候，如果苦思冥想都搞不定，那么你可以考虑下动画，说不定... 查看详情

kissui.scrollanim页面滚动动画库插件(代码片段)

...通过bower来安装kissui.scrollanim插件。bowerinstallkissui.scrollanim使用方法在页面中引入scrollanim.css和scrollanim.js文件。< 查看详情

点击事件上的AOS动画？

...发布时间】：2019-01-0613:51:20【问题描述】：我的页面正在使用AOS插件制作动画。AOS将随着页面加载而加载：AOS.init(once:true,easing:\'ease-in-out\');同一页面上的导航列表被隐藏。只有当我们单击导航菜单图标（汉堡图标）时，它才会... 查看详情

使用facebook开源动画库pop实现真实衰减动画

1.POP动画基于底层刷新原理。是基于CADisplayLink,1秒钟运行60秒，接近于游戏开发引擎@interfaceViewController()@property(nonatomic,strong)CADisplayLink*displayLink;@property(nonatomic) NSInteger count;@end- 查看详情

css3常用动画+动画库

...淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。查看演示：https://daneden.github.io/animate.css/ github地址：https://githu 查看详情

wpfloading加载动画库

原文:WPFloading加载动画库 1.下载Dll??????https://pan.baidu.com/s/1wKgv5_Q8phWo5CrXWlB9dA2.在项目中添加引用???????略3.在Xaml中引入名称空间?????xmlns:myLib="clr-namespace:MyLoadingLib;assembly=MyLoadingLib"4.使用代码??? 查看详情

41vue使用第三方动画库(代码片段)

[动画]如何在Vue中使用第三方动画库Animate.css阐述自定义动画选择方法一：给transition标签一个name方法二：自行制定CSS选择名称使用第三方动画库总结阐述这节我们一起学习一下，如何在Vue中使用第三方动画库Animate.css... 查看详情

lottie,一个强大的移动端动画库

...的每一帧动画实现高效流畅的效果，本文简单介绍其使用，以帮助读者更好的理解。通过Gradle添加依赖dependenciescompile'com.airbnb.android:lottie:2.1.0'使用方式一：XML加载&l 查看详情

lottie,一个强大的移动端动画库

...的每一帧动画实现高效流畅的效果，本文简单介绍其使用，以帮助读者更好的理解。通过Gradle添加依赖dependenciescompile'com.airbnb.android:lottie:2.1.0'使用方式一：XML加载<com.airbnb.lottie.LottieAnimationViewandroid:id="&#... 查看详情

学习vue第十一节，使用使用其他动画库完成vue动画效果(代码片段)

https://animate.style/ animate.css<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scriptsrc="lib/vue-2.4.0.js"type="text/javascript"cha 查看详情

第三方动画库使用方法

第三方动画库的使用1.名字叫:animate.css2.封装了很多工作中常用的动画3.在使用第三方时候,需要加上animated类名首先https://daneden.github.io/animate.css/下载animate.csslink进head中第一种方法<divclass="myWorld">我的世界</div><style>.my... 查看详情

animy.js，自己编写的功能丰富的html动画库

...各种js动画。比方移动、拉升、变色等等，全部动画经常使用的功能都已经实现，比方播放、暂停、停止、循环、加速、减速、反向播放、缓动、路径动画、锚点动画、复合动画、叠加动画等等。由于CSDN里面不方便直接插入js代... 查看详情

Flex / Actionscript 中的文本动画库？ [关闭]

...介绍屏幕或横幅）的酷文本动画效果库。我已经放弃尝试使用Flash本身，因为这需要很长时间，而且我不知道从众多Flash文本动画工具中选择哪一个。我希望能查看详情

uni-app引入css动画库

引入Animate动画库Animate中文网地址：http://www.animate.net.cn/Animate下载地址：https://daneden.github.io/animate.css/下载Animate.css在app.vue中引入动画库使用动画库：animated+动画End! 查看详情

你需要知道的15个很棒的css动画库

从一种CSS样式配置到另一种的过渡可以使用CSS动画进行动画处理。描述CSS动画的样式和指示动画样式的开始和结束状态的一组关键帧，以及可能的中间路点，构成了动画。与传统的脚本驱动动画技术相比，CSS动画提供... 查看详情

你需要知道的15个很棒的css动画库

reactnative实现lottie动画(代码片段)

...库，能加载AdobeAfterEffects导出的动画，并且能让原生App像使用静态素材一样使用这些动画，完美实现炫酷的动画效果。使用流程上，Lottie动画需要先使用AdobeAfterEffects做出原动画，然后再使用官方提供的Bodymovin插件把动画导出成Js... 查看详情