一、vue项目引入animate.css

第一步:在命令行中执行:

npm install animate.css --save

第二步:引入及使用:

main.js中:

import animated from 'animate.css' // npm install animate.css --save安装,在引入

Vue.use(animated)

第三步:使用 demo

vue模板中:
<div class="ty">
<!-- 直接使用animated中的动画class名,注意:必须使用animated这个class名,否则动画会无效 -->
<div class="box animated bounceInDown"></div>
</div>

二、本人写的一个滚动条滚动到相应位置然后执行动画的例子:

思路:这里没有直接添加css类名,而是结合vue指令用显示和隐藏来控制的!附上代码如下:

HTML:

  <!--重点关注代码中的 v-show ,就是添加animated的地方-->

  <section ref="qudao" class="qudao">
<div class="subtitle">
<h2>连接230万家庭</h2>
<p>您的设备接入零壹平台后,可直接上线零壹各大渠道和商城</p>
</div>
<div class="content">
<div class="earth-wrap">
<div v-show="qudaoShow" ref="earth" class="earth animated bounceInDown delay-1"></div>
<div v-show="qudaoShow" class="left-con animated fadeInLeft delay-1">
<h4>海外渠道</h4>
<p class="dec">零壹正在大力发展海外渠道,产品套装即将登陆亚马逊、Shopee等海外电商平台,同时布设大量线下经销商,远销美国、欧洲、东南亚等地。</p>
</div>
<div v-show="qudaoShow" class="right-con animated fadeInRight delay-1">
<h4>国内渠道</h4>
<p class="dec">零壹小区物业系统已实际部署超7000个小区,线上商城覆盖超230万个家庭,线下体验店遍布各大城市。超300个城市和行业合伙人负责大型项目落地,统一从零壹渠道采购设备。</p>
</div>
</div>
</div>
</section>
  <section ref="time" class="time">
<div class="subtitle">
<h2>接入,最快6小时完成</h2>
<p>我们相信,效率就是生命,为您准备了多种上云途径,零壹专家实时进行技术支援</p>
</div>
<ul class="flexbox">
<li v-show="timeShow" class="animated flipInY delay"><img src="@/assets/images/home/time1.png"></li>
<li v-show="timeShow" class="animated flipInY delay-2"><img src="@/assets/images/home/time2.png"></li>
<li v-show="timeShow" class="animated flipInY delay-4"><img src="@/assets/images/home/time3.png"></li>
</ul>
<p class="timeTxt">按照快速引导 修改MCU固件代码适配即可完成接入</p>
</section>
...

JS:

export default {
name: 'home',
data() {
close: true,
qudaoShow: false,
deviceShow: false,
sceneShow: false,
oemShow: false,
productShow: false,
timeShow: false,
dixianShow: false,
loading: false
}
},
 mounted () {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll () { // 实现当滚动到指定位置,触发动画
// let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取窗口滚动条高度
// this.gdjz('earth', 'earth animated bounceInDown', 50)
let _this = this
let refArray = [
{ref: 'qudao', show: 'qudaoShow'},
{ref: 'device', show: 'deviceShow'},
{ref: 'scene', show: 'sceneShow'},
{ref: 'oem', show: 'oemShow'},
{ref: 'product', show: 'productShow'},
{ref: 'time', show: 'timeShow'},
{ref: 'dixian', show: 'dixianShow'}
]
refArray.forEach((r,i) => {
_this.gdjz(r.ref, 20, () => {
_this[r.show] = true
})
})
},
gdjz (div, offset, callback) {
let dom = this.$refs[div] // 等同于document.querySelector('.earth') true
if(dom){
var a,b,c,d;
d = dom.offsetTop // 元素距离相对父级的高度,这里父级指的是body
a = eval(d + offset)
b = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 获取窗口滚动条高度
c = document.documentElement.clientHeight || document.body.clientHeight // 获取浏览器可视区的高度
if( b + c > a ) {
callback && callback()
}
}
},
  ...

备注:也可以使用添加类名的方法,可以参考 html5新增操作类名方式 classList,原生添加类名的方式!

vue实现滚动条滚到相应高度触发动画的操作的更多相关文章

  1. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  2. 写一个vue的滚动条插件

    组件源码如下: vue-scroll.vue <template> <div class="vue-scroll" ref="vueScrollW&qu ...

  3. CSS 奇技淫巧:动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...

  4. JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 移动端:active,:hover无法很好触发动画的解决方案

    移动端:active,:hover无法很好触发动画的解决方案 1:问题环境: 用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画. 2:解决方案: 定义一个open类, ...

  6. Vue 动态修改data 值 并触发视图更新

    Vue 动态修改data 值 并触发视图更新 this.$set(obj, key, '') // Vue 动态修改或者添加data key 并触发视图更新

  7. ViewCompat.animate(view) 动画的操作

    ViewCompat.animate(view) 实现动画的操作,动画兼容包; ViewCompat.animate(view) 实现动画的操作 .setDuration(200) .scaleX(0 ...

  8. Vue 组件内滚动条 滚到到底部

    因为在vue中,某个组件内 使用scrollTop赋值 滚动条没有变化 使用scrollTo 也不行(window.scorllTo 或者dom.scrollTo) 所以可以考虑使用投机取巧的办法: ...

  9. vue之Better-Scroll组件 将滚动条滚到最底部

    首先我们需要使用scrollTo这个方法: scrollTo(x, y, time, easing) 参数: {Number} x 横轴坐标(单位 px) {Number} y 纵轴坐标(单位 px) ...

随机推荐

  1. 【OF框架】使用原生Sql查询返回实体

    使用原生Sql查询为Entity Framework Core自身的能力,本处描述如何在框架中调用该能力. 框架代码如下: (IoCHelper.Resolve<IDbContextCore&g ...

  2. zabbix 3.2.2 server web展示如何显示中文 (三)

    1.确认zabbix是否开启了中文支持功能(/var/www/html/zabbix/include/locales.inc.php) 2.登录zabbix后,点击可爱的小公主吧 Admin(zabb ...

  3. Return local beginning of day time object in Go

    Both the title and the text of the question asked for "a local [Chicago] beginning of today tim ...

  4. mac下解决中文乱码的问题

    最近在做自己的博客项目,需要在公司和家代码同步,当然代码托管到了码云上面,但是公司是win系统,家里是mac系统,奇怪的是在公司.....算了不废话了,直接正题吧. 就是代码在公司中文显示没毛病,然后 ...

  5. TOMCAT 请求HTTP原理

    一.Tomcat是什么?Tomcat是一个Web应用服务器,同时也是一个Servlet/JSP容器.Tomcat作为Servlet容器,负责处理客户端请求,把请求传送给Servlet,并将Servle ...

  6. TG2

    1,什么滑动窗口? 2,这人讲的不行还是我的问题.. 3,搞得我都想睡觉了 4,1904,不停扫,输出最高的高度 一个差分的过程,先加上再减去,但是要维护一个最值 什么动态开点(只能用线段树并且内存很 ...

  7. 006_硬件基础电路_MOS管

    从文档中提取有用信息 链接:https://pan.baidu.com/s/1fR7ZyGDgapOdd-FtjQ6m8Q提取码:an11 复制这段内容后打开百度网盘手机App,操作更方便哦 判断三个 ...

  8. Peaks 线段树合并

    Peaks 线段树合并 \(n\)个带权值\(h_i\)山峰,有\(m\)条山峰间双向道路,\(q\)组询问,问从\(v_i\)开始只经过\(h_i\le x\)的路径所能到达的山峰中第\(k\)高的 ...

  9. Linux 下Mongdb数据库

    一.安装mongdb 1.创建安装目录 # mkdir /data/local # mkdir /data/local/mongodbdata 2.解压安装包 # tar -xvf /software ...

  10. MySQL 环比计算

    SELECT t.*, CASE WHEN t.SaleDealMoney_last ,) END link_ratio FROM ( SELECT a.my_ym, FORMAT(a.SaleDea ...