Animate动画

一个有趣的,跨浏览器的 css3 动画库。

Animate.css

  • 安装

  • npm install animate.css --save

  • main.js中引用。import animate from 'animate.css' Vue.use(animate)

  • 使用

    • 方式一:HTML标签中添加class。缺点:页面加载后就开始
    • 方式二:HTML标签中添加class,但是绑定vue变量,由变量状态控制动画的播放
    • 方式三:元素添加动画,跟普通关键帧动画@keyframes一样使用
    • 更多使用方法,参考官网

方式一

HTML标签中添加class,animate__animated加上动画效果class。例如要使用弹跳动画animate__bounce,正确的写法如下:

<h1 class="animate__animated animate__bounce">bounce弹跳动画</h1>
  • animate__delay-2s — 延迟2s
  • animate__duration-2s — 持续2s(默认1s)
  • 速度、重复次数等详细配置案例项见官网

方式二

HTML标签中添加class,但是绑定vue变量,由变量状态控制动画的播放。例如要使用水平抖动动画animate__shakeX,在点击元素时触发动画。

1.元素中绑定class与vue变量(也是必须包含animate__animated)。点击事件触发函数shake,并将变量isShakeForm作为参数

//当变量isShakeForm中的isActive为true时,应用水平抖动动画。
<h1 :class="{'animate__animated animate__shakeX animate__duration-2s' : isShakeForm.isActive }" @click="shake(isShakeForm)">bounce弹跳动画</h1>//三目运算符。应用场景:上边写法中的class要么都使用要么都不使用,不管是否应用动画class都需要应用某些样式class时,可以使用三目运算符这种写法。
<h1 :class="[isShakeForm.isActive?'login-box animate__animated animate__shakeX animate__duration-2s':'login-box']" @click="shake(isShakeForm)">bounce弹跳动画</h1>

2.vue中定义变量

isShakeBtn: {isActive:false}, //是否启用 登录按钮 摇晃动画
isShakeForm:{isActive:false},//是否启用 form表单 摇晃动画

3.编写函数shake

shake(shakeEl) { //触发 动画shakeEl.isActive = !shakeEl.isActive;//应用动画classsetTimeout(() => {shakeEl.isActive = !shakeEl.isActive;}, 2000);//动画持续时间设置为两秒,所以两秒后去掉动画class(也可以将动画持续时间作为参数传进来)
}//除了通过点击事件触发,也可以再其他函数中调用。例如表单验证失败后,调用抖动动画:
this.$refs.loginFormRef.validate(async valid => {if (!valid) { //表单预验证 不通过this.shake(this.isShakeBtn); //登录按钮 摇晃动画return;}...
}

方式三

元素添加动画,跟普通关键帧动画@keyframes一样使用。不需要包含animate__animated,且没有前缀animate__

.el-avatar:hover {animation: rubberBand;animation-duration: 1s;
}

动画class

获取动画class名。打开官网,右侧栏是动画列表,点击相应的动画名可以在中间看到动画效果,点击右侧复制按钮可复制动画class名(包含了前缀的)。

速度

动画速度修改(修改动画持续时间)

//方式一:class中添加 animate__duration-2s
<div class="forget animate__animated animate__slideInRight">...
</div>//方式二:css中修改
.animate__animated.animate__slideInRight{//.animate__slideInRight 指定应用在右侧划入动画(不指定则全部动画都应用)--animate-duration: .3s;//300毫秒
}

案例

页面切换,Animate动画的应用:

1.准备

在main.js文件中,定义

  • $goback()函数
  • $to()函数
  • vuex变量animate

App.vue文件中,设置

  • watch,监听路由变化
  • 添加Animate动画结束监听器
  • 动画全局样式(过渡时间,或者说动画速度)

main.js文件

定义$goback()函数:

$goback()函数接收一个参数,下一个页面的名称(vue-router中定义的name)

//返回上一个页面
Vue.prototype.$goback = function(name) { //页面路由名称示)this.$router.push({name: name,params: {animate: 'animate__animated animate__slideInLeft'}})
}//应用示例:
this.$goback('order')  //跳转到订单页面,带页面切换动画(返回上一级页面)

扩展:

//返回上一个页面
Vue.prototype.$goback = function(name, params) { //页面路由名称、参数params(可有可无)var myParams = {};if (params) {params.animate = 'animate__animated animate__slideInLeft';myParams = params;} else {myParams.animate = 'animate__animated animate__slideInLeft';}this.$router.push({name: name,params: myParams//用于传递参数(会拼接在url后边)})
}

定义$goto()函数:

$goto()函数接收一个参数,与上边$goback()函数相同。

//前往下一个页面
Vue.prototype.$goto = function(name) { //页面路由名称this.$router.push({name: name,params: {animate: 'animate__animated animate__slideInRight'}})
}//应用示例:
this.$goto('order')  //跳转到订单页面,带页面切换动画(进入下一级页面)

定义vuex变量animate:

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);//添加animate变量
var store = new vuex.Store({ //store对象state: {animate: '' //页面切换的动画效果}
})new Vue({el: '#app',router,store, //使用storecomponents: {App},template: '<App/>'
})

App.vue文件

App.vue文件中,设置

  • watch,监听路由变化
  • 添加Animate动画结束监听器
  • 动画全局样式(过渡时间,或者说动画速度)

监听路由变化:

//获取路由中携带的动画信息并更新到vuex的animate
'$route': function(newVal, oldVal) {//页面切换动画var animate = this.$route.params.animate; //获取 路由中携带的动画信息if (animate) {this.$store.state.animate = animate; //更新vuex中的animatethis.$route.params.animate = ''; //重置 路由中携带的动画信息 为空}
} 

添加动画监听器:

//App.vue中的created中添加监听器
//Animate动画结束后,清除vuex的animate动画信息
document.addEventListener('animationend', () => {//动画结束 监听器。清除切换动画this.$store.state.animate = ''; //重置 vuex中的animate 为空
})

动画全局样式:

//全局Animate动画样式
//$goto的动画持续时间为0.4秒(打开/进入下一页,速度稍慢)
.animate__animated.animate__slideInRight {--animate-duration: .4s;
}
//$goback的动画持续时间为0.2秒(返回上一页,速度稍快)
.animate__animated.animate__slideInLeft {--animate-duration: .2s;
}

2.使用

在要应用切换动画的页面,根元素使用v-bind绑定vuex中的animate(动画效果),跳转到该页面时(返回到此页、跳转到下一页,此页为下一页)使用上边定义的$goback()、$goto()函数,其它情况(不想应用切换动画、平级页面之间的跳转等)则使用this.$router.push()来跳转即可。

//页面 根元素 绑定vuex中的animate(动画效果)
<div :class="$store.state.animate"><div>//跳转到当前页面,要应用 页面切换动画 就使用$goback()、$goto()函数,否则使用this.$router.push()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/53136.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Animation Rigging创建模板动画(一)

什么是模板动画&#xff1f;模板对于熟悉C、C#、Java编程的开发者可能都不陌生&#xff0c;在Unity中也经常使用同一个函数带上<>来返回指定的对象&#xff0c;这些都是模板类或函数的使用。简单来说&#xff0c;模板类或函数定义了一套处理方法的过程&#xff0c;而不具…

大公开!动画制作只需要拥有这几款工具!

原创 Amazing10 业余码农 目录 大公开&#xff01;动画制作只需要拥有这几款工具&#xff01; 1 PPT / Keynote 2 Synifg Studio 3 Adobe Animate 4 FlipaClip 5 3DSMax / Maya / C4D / Blender 6 总结 在如今的社会&#xff0c;信息流已经非常泛滥。从 3G 时代流…

Chrome谷歌浏览器ImTranslator翻译插件安装使用教程

下载地址&#xff1a;https://www.chrome666.com/chrome-extension/imtranslator.html 安装 &#xff0c; 若安装报错&#xff0c;请看https://www.cnplugins.com/zhuanti/newinstall.html ImTranslator 插件设置 第一种翻译方式&#xff1a; 翻译后&#xff1a; 第二种翻译…

房地产行业指导方案

2020年伊始&#xff0c;受新冠疫情影响&#xff0c;房企销售均价普遍下滑&#xff0c;房地产行业陷入市场低迷阶段。随着疫情的平稳&#xff0c;房地产投资和销售市场正逐渐复苏&#xff0c;并借助线上营销迸发出新的活力&#xff0c;再现线上营销在房产领域的巨大能量。 房地…

2014房地产行业微信运营

2014房地产行业微信运营 目前&#xff0c;随着微信、微博用户的激增&#xff0c;各行各业都看到了微信营销的潜力&#xff0c;纷纷试水微信或微博营销&#xff0c;房地产行业亦是其中之一。对于房地产微信、微博营销方案的策划者来说&#xff0c;首先需要了解房地产的行业背景…

项目方案汇报,如何对甲方,专家和领导“投其所好”?

身为设计方的你有没有这样的经历&#xff1a; 1. 一个非常优秀的方案未能被甲方采纳&#xff0c;反而甲方选择了一个不如自己的方案&#xff0c;造成了很大的遗憾&#xff1b; 2. 在讲述自己的设计方案的时候&#xff0c;经常越说越散&#xff0c;甚至到了最后自己都不知道说…

OpenAI宣布安卓版ChatGPT正式上线;一站式 LLM底层技术原理入门指南

&#x1f989; AI新闻 &#x1f680; OpenAI宣布安卓版ChatGPT正式上线 摘要&#xff1a;OpenAI今日宣布&#xff0c;安卓版ChatGPT已正式上线&#xff0c;目前美国、印度、孟加拉国和巴西四国的安卓用户已可在谷歌Play商店下载&#xff0c;并计划在下周拓展到更多地区。Chat…

GPT-4——比GPT-3强100倍

GPT-4——比GPT-3强100倍 当前世界上最强大的人工智能系统当属ChatGPT。推出2个月用户数就突破1亿。ChatGPT是当下最炙手可热的话题&#xff0c;科技圈几乎人人都在讨论。这边ChatGPT的热度还在不断攀升&#xff0c;另一边来自《纽约时报》的最新报道称ChatGPT即将被自家超越&…

chatgpt赋能python:Python怎么提取信息

Python怎么提取信息 简介 Python是一种高级编程语言&#xff0c;它有着简单易用、跨平台、开放源码的特点&#xff0c;越来越受到全球开发者的欢迎。Python在大数据、机器学习、网站开发等领域有着广泛的应用&#xff0c;而在SEO领域&#xff0c;Python也是一种十分有用的工具…

2022版自动发卡平台自动发卡源码

&#x1f353;&#x1f353;文末获取联系&#x1f353;&#x1f353; 请用宝塔进行安装&#xff0c;建议Nginx 1.18php7.2 mysql5.5 先在宝塔上创建站点&#xff0c;然后把程序拷贝到站点根目录下&#xff0c; 打开http://你的域名/install.php进行安装&#xff0c; 后台路径…

最新老A验证系统+可生成时长卡密/次数卡密

正文: 环境&#xff1a;nginxmysql5.6php7.4 1:上传源码到服务器后解压 2&#xff1a;修改config.php 数据库信息 管理员密码 3&#xff1a;导入数据库文件 4&#xff1a;根据引导文件安装扩展后即可使用。 管理员添加卡密地址&#xff1a;http://你的域名/add.php 验…

免费版网络验证系统的全自动发卡功能

免费版网络验证系统的全自动发卡功能介绍 本套免费网站验证系统支持自动发卡功能&#xff0c;这样作者们不需要花费一分钱就可以先有收入来源&#xff0c;然后再根据自己的需求&#xff0c;来选择是否购买付费服务. 本次免费的网络验证系统&#xff0c;只需下载安装应用后就可享…

2020最新注册卡密微信在线充值购卡功能(适用于各种网络验证开发)【易语言源码】

全网很多人都在找一套属于自己网络验证系统的一套支付购卡源码 苦于搭建支付平台需要花费很大时间金钱精力 所以写了这套万能套用的源码 用的第三方的支付的平台 直接调用 你只需要【一句话】就可以调用 其他窗口直接照抄就行 自己建立卡密链接 将链接中的item替换到代码…

VideoShow -视频编辑 v8.8.4rc (更新版)

钉钉、微博极速扩容黑科技&#xff0c;点击观看阿里云弹性计算年度发布会&#xff01;>>> 下载地址: https://n802.com/file/349707-453297358http://www.369pan.com/file-28886.htmlhttp://www.yimuhe.com/file-4701189.htmlhttps://www.90pan.com/b1990565 密码&a…

VideoProc 全能视频处理工具,剪辑、转码、下载视频

推荐一个和之前yama推荐的shotcut一样好用的VideoProc 视频处理软件。它可以超简单下载超过1,000 家线上视频网站的视频。同时针对别的视频编辑、转码需求也能超容易搞定&#xff01; 安装教程 1、下载并解压VideoProc 3破解版安装包压缩包&#xff0c;然后双击运行“setup.e…

怎么视频剪辑?教你几个剪辑方法

当今短视频行业发展迅速&#xff0c;很多博主为了获取流量&#xff0c;使出百般武艺&#xff0c;通过创意剪辑&#xff0c;制作出高质量的视频作品。虽然我没法让大家马上达到大师级别的程度&#xff0c;不过还是可以给大家分享几种实用的剪辑方法&#xff0c;下面我就为各位解…

视频编辑软件:迅捷视频工具箱

这是一款功能强大、易于使用的视频编辑工具&#xff0c;支持视频剪辑、视频转换、音频转换、视频压缩、视频水印、字幕贴图等实用功能&#xff0c;可以帮助你制作出高质量的视频作品。&#xff08;传送门&#xff1a;https://www.xunjiepdf.com/xjspgjx&#xff09; 功能简介 …

Artificial Intelligence Programming with Python 笔记一

Artificial Intelligence Programming with Python 一书&#xff0c;主要对当前火热的AI技术做了简单介绍&#xff0c;适合了解一下当下最流行的AI技术&#xff0c;没有很复杂的数学知识&#xff0c;有一些简单的代码&#xff0c;可以测试。本文主要摘录第一章对AI技术的简介和…

Echarts数据动态可视化的实现

Echarts简介 Echarts缩写来自 Enterprise Charts&#xff0c;商业级数据图表&#xff0c;是百度的一个开源的数据可视化工具&#xff0c;一个纯 Javascript 的图表库&#xff0c;能够在 PC 端和移动设备上流畅运行。与此相同的数据可视化插件还有Highcharts。不过我还是比较喜…

手把手教你使用ECharts绘制可视化图表

1.在ECharts官网&#xff0c;下载ECharts的源码和示例文件。 2.解压缩下载下来的Echars压缩包&#xff0c;找到doc\example\www\echartsjs目录&#xff0c;将里面的js文件全部取出来&#xff0c;放到项目js目录文件夹下。 3.在页面的顶端引入模块加载器esl.js。 1 <script s…