当前位置: 首页 > news >正文

用 WOW.js 和 animate.css 实现动画效果

用 wow.js 就可以实现动画效果,但由于里面的动画样式太少,一般还会引入 animated.css

第一步:下载

选择合适的包管理器下载对应的内容

pnpm i wow.js animated.css --save

第二步:引入

在main.js中加入:

import 'animate.css/animate.min.css'
import 'wow.js/css/libs/animate.css'

在需要使用动画的 vue 文件中引入:

import WOW from 'wow.js'

第三步:使用

使用动画样式都需要加上‘wow’类名,可以在animate.css官网找到想要的动画样式:animate.css 官网

滑动到对应位置的时候就可以看到‘你好’从左侧淡入。

<div class="wow fadeInRight">你好
</div>

http://www.lryc.cn/news/538982.html

相关文章:

  • 1-知识图谱-概述和介绍
  • flink jobgraph详细介绍
  • 使用nginx+rtmp+ffmpeg实现桌面直播
  • 每日一题——将数字字符串转化为IP地址
  • 机器学习数学基础:25.随机变量分布详解
  • 香港电讯与Zenlayer达成战略合作,拓展全球互联生态圈
  • MySQL-事务隔离级别
  • 【Python学习 / 6】面向对象编程(OOP)
  • Ollama DeepSeek + AnythingLLM 实现本地私有AI知识库
  • 个人博客测试报告
  • 嵌入式八股文(四)计算机网络篇
  • 基于Electron+Vue3创建桌面应用
  • 建立稳定分析模式的模式语言01
  • 【C++游戏开发-五子棋】
  • ubuntu20动态修改ip,springboot中yaml的内容的读取,修改,写入
  • tailwindcss学习02
  • 千峰React:脚手架准备+JSX基础
  • 【算法】快排
  • 开放签电子签章工具版 2.0 正式发布,构建全场景电子签约能力、满足复杂的签章管理场景
  • python和pycharm 和Anaconda的关系
  • DeepSeek V3和R1
  • JavaScript数组-获取数组中的元素
  • SSE:用于流式传输的协议
  • Aseprite详细使用教程(7)——切片工具
  • 航空公司客户价值分析
  • 基于开源Odoo、SKF Phoenix API与IMAX-8数采网关的圆织机设备智慧运维实施方案 ——以某纺织集团圆织机设备管理场景为例
  • LLM 架构
  • Word Embeddings
  • 相机开发调中广角和焦距有什么不一样
  • krpano学习笔记,端口修改,krpano二次开发文档,krpano三维div信息展示,krpano热点显示文字