Vue3 animate.css + wowjs 官网实现滚动到对应元素位置增加动画特效
本人在Vue3中使用的是 setup语法糖 也就是
- <script setup>...</ script>
在项目中install一下两个插件:
- yarn add animate.css
npm install animate.css // 我使用的版本是@3.5.1
- yarn add wowjs
npm install wowjs // 版本@1.1.3
之后在main.js文件内引入 animate.css
- import animated from "animate.css";
- Vue.use(animated);
animate.css用法很简单 就是在元素标签内写class类名
- <div class="animated fadeIn"></div>
- <div class="animated fadeOut"></div>
注意 类名中的 animated 是必须有的
再说一下wowjs的用法,把wowjs包下载好之后 只需要在一个.vue后缀的文件内调用即可
自己的项目是分组件写的 所以把方法写在了最外层的Home.vue文件内 具体方法如下
- <script setup>
- import { onMounted } from "vue";
import { WOW } from "wowjs";
onMounted(() => {
new WOW({
live: false // 当时为了解决警告问题 想查看所有属性可去官网了解 https://wowjs.uk/docs.html
}).init();
})
- </ script>
之后在需要用到动画的元素的类名上增加 "wow" 类名
- <div class="wow animated fadeInUp"></div>
// 注意:想实现滚动到元素展示动画效果 元素类名必须有 "wow animated 动画效果 ..."
Vue3 animate.css + wowjs 官网实现滚动到对应元素位置增加动画特效的更多相关文章
- 13 - Vue3 UI Framework - 完善官网
为了提升用户体验,今天我们来对 jeremy-ui 官网做一个优化 返回阅读列表点击 这里 Markdown 解析支持 ️ 习惯用 markdown 语法编辑,所以我们增加项目源码对 markdown ...
- jquery操作滚动条滚动到指定元素位置 scrollTop
$('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...
- CSS学习笔记四:下拉选择框以及其动画特效
以前学的只是了解了css的一些基本属性,在做项目的时候都是直接使用bootstrap响应式来写项目,这样子很方便,很快捷,但是在自己看来还是有一点缺陷的,毕竟,我很多时候不怎么清楚它里面的具体运作.所 ...
- js滚动条滚动到某个元素位置
scrollTo(0,document.getElementById('xxx').offset().top);
- vue 结合 animate.css
这里说的是vue2.0和animate.css的结合使用.其实用过就知道用法是比较简单的.但是就是刚开始使用的时候,难免有的会遇到各种问题.简单的说说我所用过并且遇过的坑. 首先是transition ...
- 动画库animate.css的用法
简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...
- vue2.0和animate.css的结合使用
animate.css是一款前端动画库,相似的有velocity-animate. 上述是一个完整的结构.其中重要的几个点用箭头表示出来.首先在transition组件内部,需要定义两个基本的clas ...
- three.js的wave特效(ivew官网首页波浪特效实现)
查看效果请访问:https://521lbx.github.io/Web3D/index.html公司的好几个vue项目都是用ivew作为UI框架,所以ivew官网时不时就得逛一圈.每一次进首页都会被 ...
- Animate.css动画库,简单的使用,以及源码剖析
animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...
- 使用JS方法使页面滚动到指定元素+优化+API介绍(动画)
前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 目录 使用的API简介 初版 ...
随机推荐
- java位运算分析
java位运算 java位运算在平常的编码过程中十分场景,通常框架都替我们封装好了,我对于细节方面反而一知半解,下面就重新梳理一下. 优秀的框架使得我们轻松,也使得我们距离真相越来越远. 位运算种类 ...
- 选择一个有效的选项。xxx不在可用的选项中。
选择一个有效的选项.xxx不在可用的选项中. 原因:choice选项的索引类型与字段的类型不匹配. 说明:choice选项的索引类型与字段的类型,不能前面是int,后面是char. 错误示例: cla ...
- OS X Maven 安装与使用简介
Java真的很重很复杂,连项目构建和编译都得专门拉出来学,这里整理一下在OS X上使用Maven的注意事项. 一.安装 [bash] 1.从http://maven.apache.org/downlo ...
- mongodb对Obeject对象进行增删改操作
1.插入某个对象,如User对象 mongoTemplate.insert(user, "users");//第一个参数是实体类对象User, 第二个参数是mongodb对应的集合 ...
- 渲染杂谈:early-z、z-culling、hi-z、z-perpass到底是什么?
之前一直被这几个和深度缓存(z-buffer)相关的概念搞得神魂颠倒.今天在翻阅<Real-Time Rendering>时碰巧碰巧看到了这部分的讲解.硬着头皮看了看,姑且算是讲几个概念分 ...
- HELM的使用
一.helm的主要功能 1.创建新的chart 2.chart打包成tgz格式 3.上传chart到chart仓库或从仓库中下载chart 4.在kubernetes集群中安装或卸载chart 5.管 ...
- 【1】java之类与对象
一.前言 面向对象就是一种组件化的设计思想. 面向对象特性 封装性:保护内部的定义结构安全性: 继承性:在已有的程序结构上继续扩充新的功能: 多态性:在某一个概念范围内的满足. 二.类与对象的定义和使 ...
- leetcode 27. 移除元素 【时间击败100.00%】【内存击败84.67%】
1 public int removeElement(int[] nums, int val) { 2 int last = nums.length - 1; 3 for (int i = 0; i ...
- windows下判断程序是否内存泄漏
在main函数第一行写 _CrtSetDbgFlag(_CRTDBG_ALLOC_MEM_DF | _CRTDBG_LEAK_CHECK_DF); 程序退出后如果有泄漏会有打印
- nodejs 程序打包 打包 koa express 项目 源代码保护加密
打包项目 几个可以 把 nodejs 打包成单个文件的库,为了方便或保护源代码,都可以尝试,打包完成需要测试,如果项目有特殊依赖,可能会失败. https://github.com/nexe/nexe ...