本人在Vue3中使用的是 setup语法糖 也就是

  1. <script setup>...</ script>

在项目中install一下两个插件:

  1. yarn add animate.css
    npm install animate.css // 我使用的版本是@3.5.1
  1. yarn add wowjs
    npm install wowjs // 版本@1.1.3

之后在main.js文件内引入 animate.css

  1. import animated from "animate.css";
  2. Vue.use(animated);

animate.css用法很简单 就是在元素标签内写class类名

  1. <div class="animated fadeIn"></div>
  2. <div class="animated fadeOut"></div>

注意 类名中的 animated 是必须有的

再说一下wowjs的用法,把wowjs包下载好之后 只需要在一个.vue后缀的文件内调用即可

自己的项目是分组件写的 所以把方法写在了最外层的Home.vue文件内 具体方法如下

  1. <script setup>
  1. import { onMounted } from "vue";
    import { WOW } from "wowjs";

    onMounted(() => {
      new WOW({
        live: false // 当时为了解决警告问题 想查看所有属性可去官网了解 https://wowjs.uk/docs.html
    }).init();
    })
  1. </ script>

之后在需要用到动画的元素的类名上增加 "wow" 类名

  1. <div class="wow animated fadeInUp"></div>
    // 注意:想实现滚动到元素展示动画效果 元素类名必须有 "wow animated 动画效果 ..."

Vue3 animate.css + wowjs 官网实现滚动到对应元素位置增加动画特效的更多相关文章

  1. 13 - Vue3 UI Framework - 完善官网

    为了提升用户体验,今天我们来对 jeremy-ui 官网做一个优化 返回阅读列表点击 这里 Markdown 解析支持 ️ 习惯用 markdown 语法编辑,所以我们增加项目源码对 markdown ...

  2. jquery操作滚动条滚动到指定元素位置 scrollTop

    $('.brand_t a').bind('click',function(){ if($(this).attr('title1')){ var toChar = $(this).attr('titl ...

  3. CSS学习笔记四:下拉选择框以及其动画特效

    以前学的只是了解了css的一些基本属性,在做项目的时候都是直接使用bootstrap响应式来写项目,这样子很方便,很快捷,但是在自己看来还是有一点缺陷的,毕竟,我很多时候不怎么清楚它里面的具体运作.所 ...

  4. js滚动条滚动到某个元素位置

    scrollTo(0,document.getElementById('xxx').offset().top);

  5. vue 结合 animate.css

    这里说的是vue2.0和animate.css的结合使用.其实用过就知道用法是比较简单的.但是就是刚开始使用的时候,难免有的会遇到各种问题.简单的说说我所用过并且遇过的坑. 首先是transition ...

  6. 动画库animate.css的用法

    简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋 ...

  7. vue2.0和animate.css的结合使用

    animate.css是一款前端动画库,相似的有velocity-animate. 上述是一个完整的结构.其中重要的几个点用箭头表示出来.首先在transition组件内部,需要定义两个基本的clas ...

  8. three.js的wave特效(ivew官网首页波浪特效实现)

    查看效果请访问:https://521lbx.github.io/Web3D/index.html公司的好几个vue项目都是用ivew作为UI框架,所以ivew官网时不时就得逛一圈.每一次进首页都会被 ...

  9. Animate.css动画库,简单的使用,以及源码剖析

    animate.css是什么?能做些什么? animate.css是一个css动画库,使用它可以很方便的快捷的实现,我们想要的动画效果,而省去了操作js的麻烦.同时呢,它也是一个开源的库,在GitHu ...

  10. 使用JS方法使页面滚动到指定元素+优化+API介绍(动画)

    前言 当页面最上部有顶部菜单是,使用锚点跳转的方法很容易挡住想要呈现的内容(如下图技能两个字被挡住了一半),为避免出现这样的问题,故滚动到指定元素使用用JS的方法来实现. 目录 使用的API简介 初版 ...

随机推荐

  1. java位运算分析

    java位运算 java位运算在平常的编码过程中十分场景,通常框架都替我们封装好了,我对于细节方面反而一知半解,下面就重新梳理一下. 优秀的框架使得我们轻松,也使得我们距离真相越来越远. 位运算种类 ...

  2. 选择一个有效的选项。xxx不在可用的选项中。

    选择一个有效的选项.xxx不在可用的选项中. 原因:choice选项的索引类型与字段的类型不匹配. 说明:choice选项的索引类型与字段的类型,不能前面是int,后面是char. 错误示例: cla ...

  3. OS X Maven 安装与使用简介

    Java真的很重很复杂,连项目构建和编译都得专门拉出来学,这里整理一下在OS X上使用Maven的注意事项. 一.安装 [bash] 1.从http://maven.apache.org/downlo ...

  4. mongodb对Obeject对象进行增删改操作

    1.插入某个对象,如User对象 mongoTemplate.insert(user, "users");//第一个参数是实体类对象User, 第二个参数是mongodb对应的集合 ...

  5. 渲染杂谈:early-z、z-culling、hi-z、z-perpass到底是什么?

    之前一直被这几个和深度缓存(z-buffer)相关的概念搞得神魂颠倒.今天在翻阅<Real-Time Rendering>时碰巧碰巧看到了这部分的讲解.硬着头皮看了看,姑且算是讲几个概念分 ...

  6. HELM的使用

    一.helm的主要功能 1.创建新的chart 2.chart打包成tgz格式 3.上传chart到chart仓库或从仓库中下载chart 4.在kubernetes集群中安装或卸载chart 5.管 ...

  7. 【1】java之类与对象

    一.前言 面向对象就是一种组件化的设计思想. 面向对象特性 封装性:保护内部的定义结构安全性: 继承性:在已有的程序结构上继续扩充新的功能: 多态性:在某一个概念范围内的满足. 二.类与对象的定义和使 ...

  8. 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 ...

  9. windows下判断程序是否内存泄漏

    在main函数第一行写 _CrtSetDbgFlag(_CRTDBG_ALLOC_MEM_DF | _CRTDBG_LEAK_CHECK_DF); 程序退出后如果有泄漏会有打印

  10. nodejs 程序打包 打包 koa express 项目 源代码保护加密

    打包项目 几个可以 把 nodejs 打包成单个文件的库,为了方便或保护源代码,都可以尝试,打包完成需要测试,如果项目有特殊依赖,可能会失败. https://github.com/nexe/nexe ...