vue中使用woo.js + animate.css

最新推荐文章于 2022-12-15 21:50:03 发布
原创 最新推荐文章于 2022-12-15 21:50:03 发布 · 289 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在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。

安装

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",

vue3中animate.css+ wow.js的使用
Mr. Ding的小博客
11-14 2546
animate.css animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。animate.css中文网 wow.js 滚动时显示动画。wow.js官网 1、通过cnpm安装wow.js和animate.css cnpm install wowjs --save-dev cnpm install animate.css --save 2.在main.js里配置animate import animated from 'ani
Vue2使用wow.js和animate.css实现滚动动画效果
最新发布
Xiaowanzi1998的博客
12-10 914
Vue2使用wow.js和animate.css实现滚动动画效果
vue中使用animate.css库
zl13015214442的博客
02-24 4141
1、@keyframes keyframes翻译成中文，是&quot;关键帧&quot;的意思，使用transition属性也能够实现过渡动画效果，但是略显粗糙，因为不能够更为精细的控制动画过程，比如只能够在指定的时间段内总体控制某一属性的过渡，而animation属性则可以利用@keyframes将指定时间段内的动画划分的更为精细一些。 – 自定义实现 下面我们来看一个例子，要实现的效果是文字弹跳放大在缩小显现和隐...
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 691
Vue 是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。（来源百度百科） 特点 易用 已经会了HTML,CSS,JavaScript 就可以 灵活 简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能 20kb min+gzip 运行大小、超快虚拟 DOM ...
Vue+wow.js+animate.css实现版块载入动画
做笔记/记录遇到的前端bug
12-15 685
Vue项目中使用 wow.js+animate.css,实现滚动页面时，不同版块有不同的载入动画
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
青颜的天空的博客
02-20 5096
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
【前端动画库】在Vue中使用Animate.css和Wow.js
鹏啊鹏
05-22 912
官网 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'.
wow.js 使用方法
轻风细雨_林木木
08-16 4808
使用方法： 1、wow.js依赖于animate.css，首先需要在 head内引入animate.css或者animate.min.css。 &amp;amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;css/animate.css&amp;quot;&amp;amp;gt; 2、引入wow.js或者wow.min.js，然后js文件里再写一行代码。 &amp;amp
THML——七（网页规范）
小伟
08-30 402
1.一个网页中源信息要有下面几行内容
css：animate.css@4.1.1和wow.js实现网页动画效果
彭世瑜的博客
11-18 1631
需要注意的是animate.css 3.x版本和4.x版本的使用方法稍有不同 4.x版本增加了一个前缀animate__减少样式冲突 文档 wow.js: https://wowjs.uk/docs.html animate.css: https://animate.style/ CDN https://www.bootcdn.cn/wow/ https://www.bootcdn.cn/animate.css/ 通过以下代码就能很容易实现一个加载动画 <!-- 引入样式 animate.cs
Vue：vue过渡、动画特效以及借助animate.css实现动画效果
KaiSarH
11-21 1610
vue过渡、动画特效以及借助animate.css实现动画效果
vue2.0和animate.css的结合使用
zjsfdx的博客
09-03 6958
animate.css是一款前端动画库，相似的有velocity-animate。 首先是transition组件 用法： 1、要用animate.css，那么首先需要做的就是导入它。局部的导入的话，就在当前的.vue文件中的style标签中导入： @import "animate".css; 注意，导入css文件的时候。在末尾应该要加上分号。如果不加的话，会影响后面写的局部样式。 ...
[VUE+animated]vue使用动画组件库
shenlan275的博客
04-22 2862
[VUE+animated]vue使用动画组件库 众所周知,vue里带有原生的动画组件,不过那个玩意儿太难用了,而且太费子,这个animated动画库是我认为比较好用的 http://www.jq22.com/yanshi819 这是animated的动画效果演示地址 第一步:安装 npm install animate.css --save 第二步:main组件引入 import animate...
你也可以做一个小米魅族网站（WOW.js：WOW.js – 在页面滚动时展现动感的元素动画效果）
黄沙百战穿金甲，不破楼兰终不还。
08-13 6739
简介 有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。 WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。 浏览器兼容 使用方法
vue页面滚动动画——wow.js教程
朝阳39的博客
12-13 2843
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中 ...
vue,js修饰符
woosido123的博客
06-12 1716
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
vue3语法糖中wow.js+animate.css
11-26
Vue3中的Wow.js和Animate.css是一对常用的动画辅助库组合，它们可以让你在前端应用中轻松地添加动态和过渡动画效果。Animate.css是一个预先制作好的CSS动画库，它包含了大量的预设动画，比如淡入淡出、滑动、旋转等，非常适合快速给UI元素添加视觉反馈。 Wow.js则是一个轻量级的JavaScript库，它的核心功能是在页面滚动到特定元素时触发动画。当你将Animate.css的动画类名绑定到Wow实例上，并设置好触发条件（如滚动位置），当滚动事件发生时，Wow会自动应用那些动画类名，从而使得元素呈现出动态的动画效果。 在Vue3中，你可以这样做： 1. 首先，在项目中安装Wow.js和Animate.css： ```bash npm install wowjs animate.css ``` 2. 在Vue组件中导入并创建Wow实例： ```javascript import Wow from 'wowjs'; import 'animate.css'; export default { mounted() { new Wow().init(); } }; ``` 3. 使用v-bind:class或者v-wow指令结合Animate.css的动画类： ```html <div v-wow="appear" class="animated fadeIn"> 这个元素将会在滚动时平滑显示 </div> ``` 在数据中定义对应的动画状态： ```javascript data() { return { appear: true // 当滚动到该元素时，appear变为false，动画停止 }; }, ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值