Vue2.0的动画效果
本文只是结合一些代码和图片加强对Vue动画的理解，更多资料请戳这里
结合原生CSS实现动画
下面是一张图片，简单清晰明了是吧^-^
下面是一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.show-enter-active,.show-leave-active{
transition: all 0.4s ease;
padding-left: 10px;
}
.show-enter,.show-leave-active{
padding-left: 100px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="toggle">点击隐藏和显示</button>
<transition name="show">
<h3 v-show="isshow">{{message}}</h3>
</transition>
</div> <script>
new Vue({
el: '#app',
data: {
message:"hello Vue!",
isshow:false
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
}
}
})
</script>
</body>
</html>
结合animate.css实现动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css" />
<style>
.show{
transition: all 0.4s ease;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="toggle">点击隐藏和显示</button>
<transition enter-active-class="fadeInRight"
leave-active-class="fadeOutRight">
<div v-show="isshow" class="animated" class="show">{{message}}</div>
</transition>
</div> <script>
new Vue({
el: '#app',
data: {
message:"hello Vue!",
isshow:false
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
}
}
})
</script>
</body>
</html>
使用钩子函数实现动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.show{
transition: all 0.4s ease;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="toggle">点击隐藏和显示</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div v-show="isshow" class="show">{{message}}</div>
</transition>
</div> <script>
new Vue({
el: '#app',
data: {
message:"hello Vue!",
isshow:false
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
},
beforeEnter:function(el){
//定义当前实现动画的初始位置
el.style.transform = "translate(100px,0)";
},
enter:function(el,done){
//设置一下刷新状态
el.offsetWidth;
//设置动画的结束位置
el.style.transform = "translate(0px,0)";
//手动调用一下done方法，由这个方法去决定动画是否结束了
//否则动画的消失会有延迟
done();
},
afterEnter:function(el){
//将动画的状态复原设置
this.isshow = !this.isshow;
}
}
})
</script>
</body>
</html>
Vue2.0的动画效果的更多相关文章
- vue2.0中动画
#vue2.0中css动画不显示的坑: transition中包含的两个标签如果相同(此处都是p标签),需要为元素指定key.如果标签名不同的话,不指定key也可以出现动画效果. #vue2.0中js ...
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...
- vue2.0过度动画
vue在插入.更新或移除dom时,提供了多种不同方式的应用过度效果. 包括以下工具: 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库,如animate.css 在过渡钩子函数 ...
- vue2.0动画
相对于vue1.0来说,vue2.0的动画变化还是挺大的, 在1.0中,直接在元素中加 transition ,后面跟上名字. 而在vue2.0中,需要把设置动画的元素.路由放在<transit ...
- 使用 CSS3 实现超炫的 Loading（加载）动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
- Android中的动画效果
动画的种类 透明动画alphaAnimation 在代码中配置动画: findViewById(R.id.btnAnimMe).setOnClickListener(new View.OnClickL ...
- Swift - 动画效果的实现方法总结（附样例）
在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用 ...
- css3 加载动画效果
Loading 动画效果一 HTML 代码: <div class="spinner"> <div class="rect1&quo ...
- Java 给PPT添加动画效果（预设动画/自定义动画）
PPT幻灯片中对形状可设置动画效果,常见的动画效果为内置的固定类型,即动画效果和路径是预先设定好的固定模板,但在设计动画效果时,用户也可以按照自己的喜好自定义动画动作路径.下面,通过Java后端程序代 ...
随机推荐
- 求两个数a、b的最大公约数
//求两个数a.b的最大公约数 function gcd(a,b){ return b===0?a:gcd(b,a%b) }
- 论文阅读 | FoveaBox: Beyond Anchor-based Object Detector
论文阅读——FoveaBox: Beyond Anchor-based Object Detector 概述 这是一篇ArXiv 2019的文章,作者提出了一种新的anchor-free的目标检测框架 ...
- java实现图片文字识别的两种方法
一.使用tesseract-ocr 1. https://github.com/tesseract-ocr/tesseract/wiki上下载安装包安装和简体中文训练文件 window64位安装 ...
- 关于DES加密内部收费版
数据加密算法(Data Encryption Algorithm,DEA)是一种对称加密算法,很可能是使用最广泛的密钥系统,特别是在保护金融数据的安全中,最初开发的DEA是嵌入硬件中的.通常,自动取款 ...
- docker升级
使用系统自带的docker源安装docker,安装的版本都是偏低的,因此需要进行版本升级 升级步骤如下: 1. 查找现主机上关于docker的已安装包, 若列出为空,跳过第2步 rpm -qa|gre ...
- python学习-基础知识-1
1.计算机历史 计算机使用高低电压的两种状态来描述信息.计算机可以理解的只有二进制数据即010100011....,1个比特位可以表示的状态只有2种,n个比特位可以表示的状态有2的n次方种. 所以如果 ...
- SpagoBI系列----------[01]SpagoBI简介及安装步骤
商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的BI管理器能 够控制.校验.验证与分发这些BI对象. ...
- gemspec和Gemfile的不同角色作用
[原文] http://yehudakatz.com/2010/12/16/clarifying-the-roles-of-the-gemspec-and-gemfile/ 我的翻译 http ...
- mongodb3.4 远程连接认证失败
mongodb开启或者关闭授权功能时还是挺麻烦的,需要新建服务键入mongod --auth.为了方便,我这里是建了两个服务,用到哪个就切换至哪个服务. --需要授权 mongod --logpath ...
- NOI 2018 酱油记
转眼离 NOI 2018 已经过了一个星期了,退役的我还是随便来水水吧. 语法.错字之类的可能会很多,但是我也不拘这点小节了. 恭喜 yww, zjt, sk 进队,zwl, myh au , yay ...