Vue使用 AOS库 只有当页面刷新或首次加载时工作，不妨试试animate.css库

已于 2023-05-31 20:12:57 修改
阅读量450 收藏
点赞数
分类专栏： Html Css Vue Js 文章标签： vue.js css javascript
于 2023-05-31 18:06:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43814775/article/details/130974256
版权
Vue 同时被 3 个专栏收录
28 篇文章 1 订阅
订阅专栏
Html Css
27 篇文章 0 订阅
订阅专栏
Js
26 篇文章 0 订阅
订阅专栏

-AOS库 链接
-Animate.css库 链接

遇到的问题：

使用 Vue， 我是想根据 AOS 库来解决动画样式，

首次进页面的时候是没有问题的！动画也泰裤辣！

但是在当前页面点击按钮，切换成另外一个图片的时候，动画效果是不生效的，与我的预期不符合

也使用过AOS.refresh(), 但是依然没有得到满意的结果

解决方法：

我想该aos库找相关解答方法，点开issues 记录，最近的就是这个问题hahaha issue
issues

关注了这个issue，但是看这个库的更新记录最早是5年前。。。

所以我觉得并不太可能有反馈

重新找了类似这样动画效果的库，于是找到了 animate.css库

结论：

当前页面操作完之后依然想使用动态效果，不妨试试animate.css库，用法也挺简单的

Animate.css库 链接

下载方式：
在这里插入图片描述
使用方法：在这里插入图片描述

然后去官网顶部👉右边可以看到相关动态classname

相关classname：
在这里插入图片描述

동경
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AOS网页滚动动画库
08-10
当你滚动网页时可以让页面上的元素产生动画。
jquery事件在使用Datatables插件的表格只有第一页生效解决方法 @勤勤学长
勤勤学长的csdn博客
09-28 796
一开始我还以为代码写错了，因为我用来测试的表格数据都放在后边，点击删除按钮都没用反应。 然后发现连其他事件都没反应了，比如change。 通过排查法得知，第一页的数据正常，翻页之后的数据就不行了。 搜索后知道解决方法：   使用jquery中的on方法。 $(selector).on(event,childSelector,data,function)；   实例代码： ...
CSS3 动画插件 aos.js
Admans的专栏
07-21 908
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。 安装 yarn add aos@next 或者 npm install --save aos@next import AOS from 'aos'; import 'aos/dist/aos.css'; AOS.init(); 手动添加 文件下载地址：https://download.csdn.net/do.
用HTML、CSS及JS一步步创建网站，AOS 页面滚动动画库的使用
weixin_45397318的博客
05-08 2551
AOS 页面滚动动画库的使用1 安装2 页面中怎样使用**2.1 初始化 AOS****2.2 使用 data-aos 属性设置动画**3 API4 JS Events5 其他方法6 注意事项7 所有动画，easings 和锚点位置的完整列表 Github 地址：AOS - Animate on scroll library 演示，这个是用了 AOS 滚动动画库的一个网站 演示网站的源代码地址，注释很详细 1 安装 基本的 在 html 文件的 标签中引入 AOS-CSS 文件 < link r
aos页面滚动动画库的使用步骤
努力、拼搏、奋进
05-24 2163
aos页面滚动动画库，页面滚动时，下方内容依次显示出来。
vue中使用aos.js动画库
qq_40639028的博客
12-19 1819
AOS.js页面滚动动画库CSS3演示效果。
Vue中使用AOS.js滚动动画库
weixin_43899943的博客
12-18 3981
1.npm install aos --save 2.在main.js中： import AOS from "aos"; import "../node_modules/aos/dist/aos.css"; Vue.use(AOS); 3.初始化： AOS.init() 4.例： <div data-aos="fade-up" data-aos-duration="2000"> 更多效果在AOS.js官网浏览。
动画库的使用
最新发布
2301_81331526的博客
01-03 810
AOS和animate.css动画库的使用
JavaScript--AOS.js页面滚动动画插件
weixin_45406850的博客
05-17 4372
插件描述：aos.js是一款页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。 1.引用 在html文件中引入css文件和js文件 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <!--别忘了引入jQuery文件--> <script src="https://u.
vue的SEO优化——预渲染后路由+点击事件失效问题解决
yehaocheng520的博客
07-03 2671
vue是单页面框架且前后端分离，不利于seo优化。针对这一点，还是有解决办法的。 什么是SEO优化？ 体现到代码上就是：(最重要的一个就是meta标签的展示) meta标签中的name:可以使用keywords和description来添加搜索引擎的关键字和描述信息。这个就是爬虫会提取的部分。 以下部分是同事提供的，我暂时没有用到，在此做下记录，希望后续有帮助： prerender-spa-plugin——轻量级的seo解决方案 prerender-spa-plugin:轻量级的seo解决方案，对于大
vue-aos:将“滚动动画”添加到Vue组件或HTML元素的Vue组件
05-01
Vue Aos 一个Vue组件，用于在滚动时将Animation添加到Vue组件或HTML元素。 表中的内容 介绍 是一个了不起的API，可让您观察一个或多个HTMLElement进入或离开视口的时间。 当元素进入视口时，此API有许多用例，例如无限滚动，延迟加载或动画。 当元素进入视口时，动画开始。 演示版 安装 只需使用您喜欢的软件包管理器进行安装 :fire: NPM npm install vue-aos --save 纱 yarn add vue-aos import Vue from 'vue' import * as VueAos from 'vue-aos' Vue . use ( VueAos ) 用法 该软件包充当抽象组件，就像您从keep-alive或transition可能了解的那样。 这意味着它基本上是一个“装饰器”。 该组件不会向DOM输出任何标记，但会在幕
vue过渡和animate.css结合使用详解
08-30
本篇文章主要介绍了vue过渡和animate.css结合使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2.0 和 animate.css的结合使用
11-29
这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。  首先是transition组件，在2.0中由transition...
animate.css在vue项目中的使用教程
10-18
在vue项目中使用动画其实有多种方式，可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库，下面我们开始介绍在vue中单独使用animate动画，感兴趣的朋友一起看看...
vue 1.0 结合animate.css定义动画效果
10-18
本文分步骤给大家介绍了Vue 1.0自定义动画效果，vue1.0代码结合animate.css定义动画，页面一定要引入animate.cdd，具体实例代码大家参考下本
Vue Router warn The “next“ callback was called more than once in one navigation guard
热门推荐
weixin_43814775的博客
01-10 1万+
问题： 问题代码： router.beforeEach(async (to, from, next) => { const token = Cookies.get('token'); next(); if (to.path === '/login' || to.path === '/') { next(); } else { if (token) { next(); } else {
有关tsconfig.json配置详解【include】
weixin_43814775的博客
02-08 8535
tsconfig.json TypeScript 文档 【官方解释】当目录中出现了 tsconfig.json 文件，则说明该目录是 TypeScript 项目的根目录。tsconfig.json 文件指定了编译项目所需的根目录下的文件以及编译选项。 这里我想说明的是有关include属性 tsconfig.json { "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "modu
vue 使用v-for遍历对象，如何保证顺序？
weixin_43814775的博客
12-16 6201
遇到的问题： 后端按顺序返回了所有的值data, 所以我用v-for来循环的时候， 顺序偶尔对不上！这个就很难受了 为什么？ 1、会先判断是否有iterator接口，如果有循环执行next()方法 2、没有iterator的情况下，会调用Object.keys()方法，在不同浏览器中，JS引擎不能保证输出顺序一致 如何保证顺序？ 将对象的键值手动保存在数组中，因为数组的顺序是可以保证的 例如：Object.keys() ， Object.values() async refreshIndex(ctx,
打包代码时候，ts打包错误
weixin_43814775的博客
11-21 3471
方法： 找 tsconfig.json 添加下列代码 "skipLibCheck": true, 主要功能就是打包[build]的时候不打包 TypeScript 关于skipLibCheck-TS的链接
vue2使用animate.css
10-02
在Vue2中使用animate.css，你可以按照以下步骤进行操作: 1. 在终端中使用npm命令安装animate.css库: ``` npm install animate.css --save ``` 2. 在你的main.js文件中引入animate.css: ```javascript import 'animate.css'; ``` 3. 在组件中使用animate.css的类来实现动画效果。例如，在一个按钮上添加bounce动画效果: ```html <template> <button class="animate__animated animate__bounce">Click me</button> </template> ``` 4. 如果你想在过渡效果中使用animate.css来实现动画，你可以使用Vue的过渡组件和animate.css的类。例如，在一个切换动画中使用zoomIn和zoomOut效果: ```html <template> <transition enter-active-class="animate__animated animate__zoomIn" leave-active-class="animate__animated animate__zoomOut"> <div v-if="isShow" class="box"></div> </transition> </template> ``` 以上是在Vue2中使用animate.css的基本步骤。你可以根据你的具体需求来选择并应用animate.css中提供的各种类和动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值