vue中使用woo.js + animate.css

最新推荐文章于 2024-06-13 08:21:52 发布

原创最新推荐文章于 2024-06-13 08:21:52 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和使用Animate.css与Wow.js库，以实现元素进入视口时的动画效果。首先通过npm安装animate.css和wowjs，然后在Vue原型上绑定Wow实例，并在App.vue中初始化。在组件中，通过添加特定的类名如'wow.animate__animated.animate__fadeInLeft'，即可为元素添加动画。测试环境为Vue 2.5.17、Wowjs 1.1.3和Animate.css 4.1.1。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm install animate.css --save
npm i wowjs

引入并绑定到原型方法

import 'animate.css'
import wow from 'wowjs'
Vue.prototype.$wow= wow

app.vue中全局使用

  mounted() {
    let options = {
      //默认为true
      offset:'150',
      live: false
    };
    new this.$wow.WOW(options).init();
  },

在组件上添加类名、使用

<div class="home-banner" data-wow-duration="1s" class="wow.animate__animated animate__fadeInLeft"></div>

类名格式 bounceInLeft 见

https://www.kettle.net.cn/animate/index.html

https://github.com/graingert/wow

.wow.animate__animated.animate__bounceInLeft
.wow.animate__animated.animate__rubberBand
.wow.animate__animated.animate__bounceInRight
.wow.animate__animated.animate__bounceInDown
.wow.animate__animated.animate__fadeInDown
.wow.animate__animated.animate__bounceIn
.wow.animate__animated.animate__flipInX
.wow.animate__animated.animate__slideInDown
.wow.animate__animated.animate__pulse
.wow.animate__animated.animate__fadeInLeft

测试版本：

"vue": "^2.5.17",    
"wowjs": "^1.1.3"
 "animate.css": "^4.1.1",

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Super_Tyr

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue中使用animate.css库

zl13015214442的博客

02-24

4123

1、@keyframes keyframes翻译成中文，是"关键帧"的意思，使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。 – 自定义实现下面我们来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐...

wow.js+animate.css实现滚动加载动画

10-22

1418

wow.js依赖，不需要jquery；cdn：wow (v1.1.2) - Reveal CSS animation as you scroll down a page | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务。

参与评论您还未登录，请先登录后发表或查看评论

WOW.js（可视区域展示动画）

08-13

WOW.js（可视区域展示动画）：http://blog.csdn.net/libin_1/article/details/52200659

WooPixel.js

02-11

WooPixel.js 简单而骇人的客户端脚本，可将Facebook Pixel添加到您的WooCommerce网站。您需要将WooPixel.js和clarifications.js都包含到您的网页中才能正常工作。用法下载clarifications.js并根据您的网站更改值。将创建的脚本插入网站的head元素。将https://cdn.jsdelivr.net/gh/gntouts/WooPixel.js@1.0.0/WooPixel.min.js添加到网站的head元素中。做完了！警告仅依赖于CSS选择器，因此请注意，对主题的更改或任何其他可能更改您网站元素的类或ID的更新可能会导致失败。目前，整个购买后功能均基于Skroutz Analytics脚本。如果您的网站没有Skroutz Analytics插件，则此脚本将不会记录任何购买！

第一个Vue实例

Woo_home的博客

06-01

673

Vue 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。（来源百度百科）特点易用已经会了HTML,CSS,JavaScript 就可以灵活简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能 20kb min+gzip 运行大小、超快虚拟 DOM ...

基于vue+node.js+mysql的网站商城

06-01

所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等

beetle:Vue.js + Node.js + MySQL实现校园二手交易网

03-05

JavaScript框架：Vue（^ 2.6.10）状态管理工具：Vuex（^ 3.0.1）路由：Vue路由器（^ 3.1.3） UI库：element-ui（^ 2.15.1） CSS预处理器：SCSS 主要第三方库工具库：vue-cookies HTTP库：axios CSS重置：...

【图书推荐】《Vue.js 3.x+Element Plus前端开发实战》

brucexia的专栏

06-13

9489

本书分为两篇，共14章。第一篇（第1~7章）介绍Vue.js 3和Element Plus相关的基础知识，其中包含Vue .js 3的基础知识、Vue.js 3生态Vue Router和Vuex的相关知识与应用、Element Plus常用组件的使用方法以及Vue.js 3和Element Plus配合使用的好处和方法，各章节通过简单的示例，使读者可以快速掌握相关知识；第二篇（第8~14章）讲解如何构建一个功能完整的单页面应用——权限管理系统，为读者掌握Element Plus打下坚实的基础。

fullpage.js结合animate.css实现滚屏动画

06-11

fullpage.js结合animate.css实现滚屏动画，每段代码都加有详细注释文章地址：https://blog.csdn.net/cplvfx/article/details/80649574

wow.js 使用方法

轻风细雨_林木木

08-16

4713

使用方法： 1、wow.js依赖于animate.css，首先需要在 head内引入animate.css或者animate.min.css。 &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;css/animate.css&quot;&amp;gt; 2、引入wow.js或者wow.min.js，然后js文件里再写一行代码。 &amp

THML——七（网页规范）

小伟

08-30

384

1.一个网页中源信息要有下面几行内容

vue,js修饰符

woosido123的博客

06-12

1706

v-on:click.stop="doThis"> v-on:submit.prevent="onSubmit"> v-on:click.stop.prevent="doThat"> v-on:submit.prevent> v-on:click.capture="doThis">... v-on:click.self="doThat">... v-on:click.on

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

zjsfdx的博客

09-03

6930

animate.css是一款前端动画库，相似的有velocity-animate。首先是transition组件用法： 1、要用animate.css，那么首先需要做的就是导入它。局部的导入的话，就在当前的.vue文件中的style标签中导入： @import "animate".css; 注意，导入css文件的时候。在末尾应该要加上分号。如果不加的话，会影响后面写的局部样式。 ...

【前端动画库】在Vue中使用Animate.css和Wow.js

鹏啊鹏

05-22

856

官网 animate动画库官网 wowjs官网 animate是一个动画库，只需要在组件中引入class即可使用，wowjs可以让animate动画组件只在轮动显示出来时才展示动画，而不是在页面刷新时立即展示动画。 1 下载 npm install animate.css --save npm install wowjs --save 2 配置在main.js中引入 // wowjs // import 'wowjs/css/libs/animate.css' import 'animate.css'.

Vue：vue过渡、动画特效以及借助animate.css实现动画效果

KaiSarH

11-21

1507

vue过渡、动画特效以及借助animate.css实现动画效果

vue中使用wow.js+animate.css实现页面滚动加载元素动画

xiamoziqian的博客

01-16

1483

1.npm 安装 wow.js，安装后 animate.css 会自动安装 npm install wowjs --save-dev 或者使用yarn安装 yarn add wow.js 2.在main.js中引入animate.css import 'wowjs/css/libs/animate.css' 3.在需要的组件中引入 wow.js import WOW from 'wowjs'...

你也可以做一个小米魅族网站（WOW.js：WOW.js – 在页面滚动时展现动感的元素动画效果）

黄沙百战穿金甲，不破楼兰终不还。

08-13

6715

简介有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。 WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。浏览器兼容使用方法

vue页面滚动动画——wow.js教程

朝阳39的博客

12-13

2732

WOW.js 是一款帮助你实现滚动页面时触发CSS 动画效果的插件。缺陷：当页面向下滚动时，动画出现；当页面向上回滚时，动画不会回退。（即动画仅出现一次！）官网地址https://www.delac.io/wow/ Demo演示-仿oppo首页 https://www.dowebok.com/demo/131/index2.html 1. 安装 npm install wowjs --save-dev animate.css会自动安装 2. 配置 main.js中 ...

vue3语法糖中wow.js+animate.css