Vue基础进阶 之 过渡效果
进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果；
如何使用过渡效果：利用<transition></transition>组件将需要应用的过渡效果的DOM对象包裹住，然后书写对应的样式；
过渡的类名：过渡效果的样式是类样式，在进入/离开的过渡中有6个类样式的切换，分别是：
v-enter：定义进入过渡的开始状态；
v-enter-active：定义进入过渡生效状态，在这里可以定义进入过渡的时间、延迟、曲线函数等；
v-enter-to：定义进入过渡结束状态；
v-leave：定义离开过渡的开始状态；
v-leave-active：定义离开过渡生效状态，在这里可以定义离开过渡的时间、延迟、曲线函数等；
v-leave-to：定义离开过渡结束状态；
注意：在<transition name='fade'>中如果指定了name属性，过渡类名的v-要替换成name属性值；例如：fade-enter
示例：
初始加载页面：
由图像效果可知，点击显示与隐藏按钮，盒子的出现的效果并没有任何的过渡，显得比较死板：
初始代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12_过渡效果</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style> .mybtn{
margin: auto;
width: 100px;
height: 100px;
background-color: red;
} </style> </head>
<body>
<div> <button @click="flag=!flag">显示/隐藏</button>
<div v-show="flag" class="mybtn"></div> </div>
</body> <script> let vm= new Vue({
data:{ flag:false } }).$mount('div'); </script>
</html>
初始效果代码
实现一种渐隐渐现的效果：
重点使用了transition的组件，以及修改了，离开时的样式和出现的样式：
<div>
<button @click="flag=!flag">显示/隐藏</button>
<transition name='fade'>
<div v-show="flag" class="mybtn"></div>
</transition>
</div>
样式：
<style>
.mybtn{
margin: auto;
width: 100px;
height: 100px;
background-color: red;
}
.fade-enter-active,.fade-leave-active{
transition: all 2s;
}
.fade-enter{
opacity: ;
}
.fade-enter-to{
opacity: ;
}
.fade-leave{
opacity: ;
}
.fade-leave-to{
opacity: ;
}
</style>
实现进入、离开过渡效果：
样式：
<style>
.mybtn{
width: 100px;
height: 100px;
background-color: red;
transform: translateX(50px);
}
.fade-enter-active,.fade-leave-active{
transition: all 2s;
}
.fade-enter{
opacity: ;
transform: translateX(0px);
}
.fade-enter-to{
opacity: ;
transform: translateX(50px);
}
.fade-leave{
opacity: ;
transform: translateX(50px);
}
.fade-leave-to{
opacity: ;
transform: translateX(0px);
}
</style>
实现进入、离开过渡效果总的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12_过渡效果</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style> .mybtn{ width: 100px;
height: 100px;
background-color: red;
transform: translateX(50px);
}
.fade-enter-active,.fade-leave-active{
transition: all 2s; }
.fade-enter{
opacity: ;
transform: translateX(0px);
}
.fade-enter-to{
opacity: ;
transform: translateX(50px);
}
.fade-leave{
opacity: ;
transform: translateX(50px);
}
.fade-leave-to{
opacity: ;
transform: translateX(0px);
} </style> </head>
<body>
<div> <button @click="flag=!flag">显示/隐藏</button>
<transition name='fade'>
<div v-show="flag" class="mybtn"></div> </transition> </div>
</body> <script> let vm= new Vue({
data:{ flag:false } }).$mount('div'); </script>
</html>
实现进入与离开的过渡效果
过渡效果使用钩子函数
过渡效果中也提供了对应的钩子函数，这些钩子函数需要在<transition>组件上绑定，然后再实现；
过渡效果的钩子函数有：
@before-enter=“beforeEnter“ ：进入过渡运行前
@enter=“enter“ ：进入过渡运行时
@after-enter=“afterEnter“ ：进入过渡运行后
@enter-cancelled=“enterCancelled“ ：进入过渡被打断时
@before-leave=“beforeLeave“ ：离开过渡运行前
@leave=“leave“ ：离开过渡运行时
@after-leave=“afterLeave“ ：离开过渡运行后
@leave-cancelled=“leaveCancelled“ ：离开过渡被打断时
详情介绍网址：
https://cn.vuejs.org/v2/guide/transitions.html
实例：
vue代码：
<script>
let vm= new Vue({
data:{
flag:false
},
methods:{
beforeEnter(){
alert("beforeEnter 进入过渡开始前 " );
},
enter(){
alert("enter 进入过渡状态开始");
},
afterEnter(){
alert("afterEnter 进入过渡状态结束");
},
enterCancelled(){
alert("enterCancelled 进入过渡状态 被打断");
},
beforeLeave(){
alert("beforeLeave 离开过渡开始前 " );
},
leave(){
alert("leave 离开过渡状态开始");
},
afterLeave(){
alert("afterLeave 离开过渡状态结束");
},
leaveCancelled(){
alert("leaveCancelled 离开过渡状态 被打断");
}
}
// @before-enter="beforeEnter"
// @enter="enter"
// @after-enter="afterEnter"
// @enter-cancelled="enterCancelled"
//
// @before-leave="beforeLeave"
// @leave="leave"
// @after-leave="afterLeave"
// @leave-cancelled="leaveCancelled"
//
}).$mount('div');
</script>
HTML代码：
<div>
<button @click="flag=!flag">显示/隐藏</button>
<transition name='fade'
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled">
<div v-show="flag" class="mybtn"></div>
</transition>
</div>
使用的样式与进入离开过渡效果一样
实现进入的时候变为green,离开的时候变为红色
修改了vue代码，其余的未修改：
methods:{
beforeEnter(){
// alert("beforeEnter 进入过渡开始前 " );
},
enter(el){
// alert("enter 进入过渡状态开始");
// 延时函数
setTimeout( ()=>{
el.style.backgroundColor='green';
},);
},
afterEnter(){
// alert("afterEnter 进入过渡状态结束");
},
enterCancelled(){
// alert("enterCancelled 进入过渡状态 被打断");
},
beforeLeave(){
// alert("beforeLeave 离开过渡开始前 " );
},
leave(el){
el.style.backgroundColor='red';
// alert("leave 离开过渡状态开始");
},
afterLeave(){
// alert("afterLeave 离开过渡状态结束");
},
leaveCancelled(){
// alert("leaveCancelled 离开过渡状态 被打断");
}
}
过渡效果的使用钩子函数总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>13_过渡效果的钩子函数</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<style> .mybtn{ width: 100px;
height: 100px;
background-color: red;
transform: translateX(50px);
}
.fade-enter-active,.fade-leave-active{
transition: all 2s; }
.fade-enter{
opacity: ;
transform: translateX(0px);
}
.fade-enter-to{
opacity: ;
transform: translateX(50px);
}
.fade-leave{
opacity: ;
transform: translateX(50px);
}
.fade-leave-to{
opacity: ;
transform: translateX(0px);
} </style> </head>
<body>
<div> <button @click="flag=!flag">显示/隐藏</button>
<transition name='fade'
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled" @before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"> <div v-show="flag" class="mybtn"></div> </transition> </div>
</body> <script> let vm= new Vue({
data:{ flag:false },
methods:{ beforeEnter(){
// alert("beforeEnter 进入过渡开始前 " );
},
enter(el){ // alert("enter 进入过渡状态开始");
// 延时函数
setTimeout( ()=>{
el.style.backgroundColor='green'; },);
}, afterEnter(){
// alert("afterEnter 进入过渡状态结束");
},
enterCancelled(){ // alert("enterCancelled 进入过渡状态 被打断");
}, beforeLeave(){
// alert("beforeLeave 离开过渡开始前 " );
},
leave(el){
el.style.backgroundColor='red'; // alert("leave 离开过渡状态开始");
}, afterLeave(){
// alert("afterLeave 离开过渡状态结束");
},
leaveCancelled(){ // alert("leaveCancelled 离开过渡状态 被打断");
}
} // @before-enter="beforeEnter"
// @enter="enter"
// @after-enter="afterEnter"
// @enter-cancelled="enterCancelled"
//
// @before-leave="beforeLeave"
// @leave="leave"
// @after-leave="afterLeave"
// @leave-cancelled="leaveCancelled"
// }).$mount('div'); </script>
</html>
过渡效果的使用钩子函数
过渡效果结合Animate的使用
Vue中的过渡效果也可以与其他第三方CSS动画库一起使用，例如Animate.css；
使用第三方动画库我们需要用到自定义过渡类名：
enter-class； enter-active-class； enter-to-class； leave-class； leave-active-class； leave-to-class；
用到的代码：
<link rel="stylesheet" href="../css/animate.css" />
<transition name='fade'
enter-to-class='animated zoomlnDown' leave-to-class='animated zoomOutUp' >
<div v-show="flag" class="mybtn"></div> </transition>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>14_过渡效果结合Animate的使用</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<link rel="stylesheet" href="../css/animate.css" />
<style> .mybtn{ width: 100px;
height: 100px;
background-color: red;
transform: translateX(50px);
}
.fade-enter-active,.fade-leave-active{
transition: all 2s; }
.fade-enter{
opacity: ;
transform: translateX(0px);
}
.fade-enter-to{
opacity: ;
transform: translateX(50px);
}
.fade-leave{
opacity: ;
transform: translateX(50px);
}
.fade-leave-to{
opacity: ;
transform: translateX(0px);
} </style> </head>
<body>
<div> <button @click="flag=!flag">显示/隐藏</button>
<transition name='fade'
enter-to-class='animated zoomlnDown' leave-to-class='animated zoomOutUp' >
<div v-show="flag" class="mybtn"></div> </transition> </div>
</body> <script> let vm= new Vue({
data:{ flag:false } }).$mount('div'); </script>
</html>
过渡效果结合Animate的使用
Vue基础进阶 之 过渡效果的更多相关文章
- vue 基础-->进阶 教程(1): 基础（数据绑定）
第一章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue基础进阶 之 列表过渡
在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- Vue基础进阶 之 实例方法--生命周期
在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...
- Vue基础进阶 之 实例方法
常用的实例方法: 数据: vm.$set:设置属性值: vm.$delete:删除属性值: vm.$watch:观测数据变化: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destr ...
- Vue基础进阶 之 常用的实例属性
Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...
随机推荐
- maven项目中使用redis集群报错： java.lang.NumberFormatException: For input string: "7001@17001"
解决:由于redis集群的采用的版本是2.7的,在maven的pom.xml中将jedis的版本改成2.9的就可以了
- Windows下使用VS2017搭建FLTK开发环境
环境介绍 系统:win10 64位 IDE:VS 2017 Community FLTK版本:1.3.4-2 下载FLTK 截止到本文编写,FLTK的最新稳定版本是1.3.4-2.我们从官网(www. ...
- Piggy-Bank 完全背包
来源hdu1114 Problem Description Before ACM can do anything, a budget must be prepared and the necessar ...
- post数据过多时，有可能会丢失数据
开奖时,post时请求的user_id过多,导致活动id丢失
- 前端上传 base64 编码图片到七牛云存储
参考文档 如何上传base64编码图片到七牛云 调试过程 文档中分别有 java 和 html 的 demo,可以根据文档示例调试. 下面是我调试的过程,可以作为参考,特别注意的是,如果需要给文件起名 ...
- js中级小知识5
元素的属性 div.attributes是所有标签属性构成的数据集合 div.classList是所有class名构成的数组集合 在classList的原型链上可以看到add()和remove() 1 ...
- org.apache.commons.dbcp.SQLNestedException: Cannot create PoolableConnectionFactory (Access denied for user 'root'@'localhost' (using password:
tationProcessor' to allow for resolving potential circular referencesDEBUG 2018-05-28 11:32:35,016 o ...
- 我了解到的新知识之—MPLS
下周末运营商来公司要对MPLS升级,对于一个多年权限管理经验的我来说未免有些陌生,幸好现在网络资源丰富,就开始了搜索之旅,找到了一些信息,所以在想干脆以后就开一个系列就叫<我了解到的新知识> ...
- MySQL慢查询语句的定位
使用以下语句可以查询相关的配置和日志所在位置: show variables like '%slow%'; 名词解释: log_slow_admin_statements: 打开后可以将一些比较慢的管 ...
- Mycat了解下
首先说下,因为本身不怎么推荐中间件,所以我对这东西也只是了解,业内mycat用的最好的应该顺风算一个,但是他们是做过二次开发的,咱菜鸡比不了,据说最近出来一个叫cetus的还不错,有空可以关注下 Ⅰ. ...