当前位置: 首页 > 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>

相关文章:

  • tomcat 使用域名访问失败
  • 项目一 - 任务1:了解Java编程语言
  • AUTO TECH China 2025 广州国际汽车技术展览会:引领汽车科技新潮流
  • 【WPS+VBA】表格中重复表头与页码的批量删除
  • mybatis存储过程返回list
  • DeepSeek系统架构的逐层分类拆解分析,从底层基础设施到用户端分发全链路
  • 芝加哥学派(Chicago School):金融与经济学的创新力量(中英双语)
  • 【LangChain实践开发】如何对大模型I/O封装?
  • 2026考研趋势深度解析:政策变化+高效工具指南
  • 利用SkinMagic美化MFC应用界面
  • Python网络运维自动化:从零开始学习NetDevOps
  • 深入理解正则表达式的预查
  • 数据融合的经典模型:早期融合、中期融合与后期融合的对比
  • Cursor助力Java开发
  • rust笔记4-属性derive
  • Vuex与其他状态管理库相比有什么优势?
  • 亲测!我是如何用 Anything LLM 等搭建 AI 智能知识库的
  • Java 设计模式之解释器模式
  • UGUI RectTransform的SizeDelta属性
  • ocr智能票据识别系统|自动化票据识别集成方案
  • 万达电影:股东杭州臻希拟减持不超1.3927%公司股份
  • 8大类1000多支,中国红十字会已建成10万人规模救援队伍
  • 两国战机均未侵入对方领空,巴方公布对印回击细节
  • 黄仁勋:中国AI市场将达500亿美元,美国企业若无法参与是巨大损失
  • 李云泽:对受关税影响较大、经营暂时困难的市场主体,一企一策提供精准服务
  • 解放军仪仗司礼大队仪仗分队参加纪念苏联伟大卫国战争胜利80周年阅兵活动