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后端程序代 ...
随机推荐
- [转] vagrant学习笔记 - provision
[From] https://blog.csdn.net/54powerman/article/details/50684844 从字面上来看,provision是准备,实现的功能是在原生镜像的基础 ...
- Quartz .net 一直运行失败
使用了新的: Quartz.NET 2.6.2 https://github.com/quartznet/quartznet/releases IScheduler scheduler = StdSc ...
- R 升级版本
从3.4.1 升级到最新 懒得去官网下载 在R studio 执行一下代码 install.packages("installr") library(installr) updat ...
- window.load方法 （加载全部图片，第三方网站时使用）
$(window).load( function(){ console.lo ...
- CDH集群安装配置（四）- mysql 的安装
安装mysql,并且创建相关的表(只需要在chd1上面安装而且需要root权限)1.1 查看Centos自带mysql是否已经安装 yum list installed | grep mysql 卸载 ...
- scrapy源码分析（转）
记录一下两个讲解scrapy源码的博客: 1.http://kaito-kidd.com/2016/11/21/scrapy-code-analyze-component-initialization ...
- numpy多维矩阵，取出第一行或者第一列，方法和df一样
# 定义一个多维矩阵 arr = np.array([[1,2,3], [4,5,6], [7,8,9]]) # 取出第一行 arr[0,:] # 取出第一列 arr[:,0]
- Oracle rownum
本问参考自Oracle中ROWNUM的使用技巧.纯属读书笔记,用于加深记忆 rownum是oracle中的一种伪列,它会根据返回的记录生成一个序列化的数字,利用rownum,我们可以得到一些原先难以得 ...
- 2019美国大学生数学建模竞赛B题（思路）
建模比赛已经过去三天了,但留校的十多天里,自己的收获与感受依然长存于心.下面的大致流程,很多并没有细化,下面很多情况都是在假设下进行的,比如假设飞机能够来回运送药品,运货无人机就只运货,在最大视距下侦 ...
- 45 Useful Oracle Queries--ref
http://viralpatel.net/blogs/useful-oracle-queries/ Here’s a list of 40+ Useful Oracle queries that e ...