vue指令之滚动动画

凡小多

已于 2022-12-07 13:39:46 修改

阅读量809

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-11-30 11:07:55 首次发布

本文链接：https://blog.csdn.net/wgh4318/article/details/128097881

版权

本文介绍了如何在 Vue 中使用自定义指令来实现滚动时的动画效果。通过监听可视区域，动态添加和删除动画类名，结合 animate.css 动画库，实现了平滑的用户体验。详细内容包括原理和具体使用方法。

摘要由CSDN通过智能技术生成

原理

利用IntersectionObserver API 实现可视区域添加删除动画类名。

IntersectionObserver API ：详情见vue自定义指令之图片懒加载

效果图：
在这里插入图片描述

使用

为了更好的动画效果使用了 anmate.css动画库

<div v-animate-onscroll.repeat="'animate__animated animate__swing'" class="box">
  <img class="image" src="@/assets/images/cat.jpg" />
</div>
<div v-animate-onscroll="'animate__animated animate__rotateInUpRight'" class="box"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

凡小多

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue实现列表滚动的过渡动画

11-20

在本例中，我们将讨论如何使用Vue实现列表滚动的过渡动画。这种动画效果在滚动列表时为用户体验增加了动态感，使得滚动更加平滑和吸引人。首先，我们要了解实现这种过渡动画的基本原理。在滚动过程中，我们需要...

vue-animate-scroll一种超级轻量级的方式，可在元素滚动到视图中时将CSS动画添加到元素中。-Vue.js开发

05-27

vue-animate-scroll一个小的Vue组件，当元素滚动到视图中时，它提供了一种使元素动画化的简便方法。设置npm i-保存vue-animate-scroll vue-animate-scroll一个小的Vue组件，提供了一种在元素滚动到视图时对其进行动画处理的简便方法。设置npm i-保存vue-animate-scroll＃或添加纱线vue-animate-scroll导入到主Javascript文件中从'vue'导入Vue从'vue-animate-scroll'导入VueAnimate Vue.use（VueAnimate）用法HTML

参与评论您还未登录，请先登录后发表或查看评论

vue-animate-onscroll：一个简单的组件，可在元素滚动到视图中时对其进行动画处理

02-03

Vue动画控制一个简单的Vue指令，可在元素滚动到视图中时对其进行动画处理。安装 npm install vue-animate-onscroll # or yarn add vue-animate-onscroll 建立导入到您的Vue应用程序 import Vue from 'vue' import VueAnimateOnScroll from 'vue-animate-onscroll' Vue . use ( VueAnimateOnScroll ) 用法出于演示目的，让我们使用css动画库，但使用您自己的自定义CSS动画也将以相同的方式工作。 animate.css导入

最新发布

gitblog_00739的博客

08-09

485

页面优化和动画库

hzqzzz的博客

09-02

448

这个属性设置时只渲染浏览器，意味着你如果一次性加载了1000条数据，但是当前页面只能显示3条，，当滚动条滚动时，才显示相应的数据。例如我这里写了1000个元素，但是只能显示视窗范围内的向下滚动时会逐步加载一般常用的就是这个属性的意思就是告诉浏览器，你即将给使用它的元素开始某某动画。但是要注意的是这个不要全局设置，会影响性能，若动画加载的时候不卡就不要用。常用动画库：发现了两个好玩的库1.滑动视差 main.js中直接指令使用 2.元素加载动画 vue-animate-onscroll 这个

vue中使用vue-animate-onscroll滚动动画插件,在main里引入报错不能使用。

L_eiDigaga的博客

08-05

1532

最近在使用vue-animate-onscroll插件，做元素滚动到视图进行动画效果。但发现按官网上写的在main里引入后会一直报错。这是官网的引入用法这就一直报错然后找到他的源码内容。给他提取出来在一个js文件中，在main里直接引入这个js文件，完美好用。放上这个js文件 var ScrollAnimate = () => { const e = e => "string" == typeof e, t = (e, t, n = "") => e.class

AnimateOnScroll：网页，它使用AOS（滚动动画）库在滚动页面时实现淡入淡出效果

02-22

动画滚动 2020年3月马克·戴维斯（Marc Davies）目录描述使用AOS（滚动动画）库在滚动页面时实现淡入淡出效果的网页。该应用程序是根据Traversy Media的“滚动动画网页| AOS库”构建的：： ptfUwPJbGlQ＆t 使用的技术 HTML CSS AOS库安装与安装启动您的终端。 cd desktop导航到桌面。 git clone "https://github.com/MarcLignarius/AnimateOnScroll"将此存储git clone "https://github.com/MarcLignarius/AnimateOnScroll"到您的桌面。 cd AnimateOnScroll打开克隆的存储库。 open index.html这将在浏览器中打开网页。或者，访问以查看应用程序的实时版本。已知错误

vue页面动画

weixin_41184962的博客

07-21

1295

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。alternate-reverse：逆序交替迭代，第一次以reverse播放，第二次以normal播放。2. 百分比，如 0%，25%，50%，100%注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

元素滚动到视图中时对其进行动画处理：vue-animate-onscroll

05-02

2052

参考：https://www.npmjs.com/package/vue-animate-onscroll 在线demo：https://vue-animate-onscroll.netlify.app/ <template> <div class="test"> <div style="height: 1200px;"></div> <section style="border:1px solid red"> .

vue里使用animated-scroll-to代替原生滚动实现兼容ie的平滑滚动定位

学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等

04-03

671

/ hasScrolledToPosition为false：表示滚动动画被用户中断，或者通过另一个“animateScrollTo”调用。这里需要我们在脚手架的配置文件里面添加下面配置进行依赖包的编译。// hasScrolledToPosition为true：表示页面滚动到所需位置。这里我们需要的是锚点定位到哪个元素，然后滚动到相应的位置，我们可以使用。// 使用animated-scroll-to代替原生滚动。在看 andt 文档的时候了解到的。// 垂直滚动距离顶部的距离。这里建议使用v2版本的。

animate-on-scroll:滚动网页时通过图像序列制作动画

07-17

滚动动画当您滚动网页时，通过图像序列制作动画。例子用法复制存储库 git 克隆将js和css文件复制到你的项目中 js/aniscroll.js css/aniscroll.css 将 js 和 css 文件的引用添加到您的项目中 < link rel =" stylesheet " href =" css/aniscroll.css " > < script src =" js/aniscroll.js " > </ script > 将图像序列标记添加到具有“aniScrollContainer”类的容器内的 html < div xss=removed> < img xss=removed> < img src = "images/armani-ba

animate_on_scroll:滚动时显示动画

06-28

滚动动画滚动时显示动画。 ##Demo ##Description 如果您喜欢 animate.css，请确定您喜欢滚动动画。这个简单的库允许您以最简单的方式为网站上的任何元素设置动画。轻松自定义动画设置：延迟、长度、偏移量…… ＃＃特征轻的完全兼容 jQuery 和 css 设置和运行简单非常可定制 ##Instalation 安装此插件非常简单，只需复制文件 animate_on_scroll.min.js 并将其包含在您的页面中。 [removed][removed] ##Requirements 这个插件需要jquery 库。 ##Documentation ##Credits 由 Rabartu 开发由 Animate.css 提供支持的 CSS 动画

animate-on-scroll:简单的Angular指令，一旦在视口中滚动到，即可将CSS动画类添加到元素

05-25

ng2-滚动动画一个非常简单的Angular指令，没有依赖项，一旦通过滚动页面到达该元素，就可以在该元素上添加CSS动画。可与您选择的任何CSS动画一起使用，包括Animate.css，如示例所示。没有animate.css一个例子可以发现，与animate.css可以发现。安装要在您的项目中安装指令，请运行： $ npm install ng2-animate-on-scroll --save 使用指令在您的应用程序模块中修改以下内容： import { BrowserModule } from '@angular/platform-browser' ; import { NgModule } from '@angular/core' ; import { AppComponent } from './app.component' ; // import third-p

animate-on-scroll:滚动库上的动画

04-16

滚动动画滚动库上的动画

vuehappyscroll是一款基于vue20的滚动条插件

08-08

此插件致力解决原生滚动条在不同系统、不同浏览器中的丑陋表现，在保证原生滚动条功能可用的基础上实现了更丰富的功能、保证在所支持的浏览器下展现出风格一致、交互体验一致的滚动条。

vue实现数字滚动效果

10-15

总结起来，实现Vue数字滚动效果的关键在于理解Vue的生命周期、数据绑定、计算属性和方法的使用，以及结合CSS动画实现视觉效果。通过以上代码，我们可以创建一个能够接收外部数字数据并平滑滚动显示的Vue组件。这个...

vue指令实现页面图片懒加载鼠标滚动图片开始加载

12-01

Vue 指令是Vue.js框架提供的一种自定义行为方式，通过创建自定义指令，我们可以实现图片懒加载功能，即当图片进入浏览器视口时才开始加载，这样可以有效地节省带宽，提高页面的加载速度。图片懒加载的核心原理在于...

Vue-CountUp-V2 数字滚动动画库

xingchen678的博客

06-06

290

Vue-CountUp-V2 数字滚动动画库

Vue实现列表滚动过渡动画详解

"本文将详细介绍如何在Vue框架中实现列表滚动的过渡动画，结合示例代码，提供了一种实现方式，适用于对Vue有兴趣并希望在项目中应用过渡动画的开发者。" 在Vue中，实现列表滚动过渡动画可以提升用户体验，尤其是在...