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:获取 ...
随机推荐
- 浏览器调起Hbuilder的APP
最近用Hbuilder来开发APP,测试各种功能,其中,最近测试到,要用这个浏览器调起APP的功能,我看官网有教程,但是有些可能刚工作没多久,所以,有些地方看不大明白,官方也没细说,所以 ...
- wpgcms---循环导航
使用wpgcms的时候,在后台设置了导航菜单,那么在前端是如何循环呢? 第一种:简便方法 {% set array = [ {name:'移动APP',icon:'icon-yidongAPP',co ...
- PE、ELF结构图
PE:https://bbs.pediy.com/thread-203563.htm ELF:https://blog.csdn.net/jiangwei0910410003/article/deta ...
- JBPM工作流（一）——实现一个简单的工作流例子
一.JBPM定义 JBPM,全称是Java Business Process Management(业务流程管理),它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的.易扩展的可执行流 ...
- php三级联动（html，php两个页面）
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- python----运行机制
Python 是一门解释型的编程语言,因此它具有解释型语言的运行机制. 计算机程序,其实就是一组计算机指令集,能真正驱动机器运行的是机器指令,但让普通开发者直接编写机器指令是不现实的,因此就出现了计算 ...
- ios学习--iphone 实现下拉菜单
原文地址:ios学习--iphone 实现下拉菜单作者:sdglyuan00 #import @interface DropDown1 : UIView <</span>UITabl ...
- 关于vue执行打包后，如何在本地浏览问题
最近一个人在捣鼓vue,写完项目后发现在npm run dev下可以正常访问,bulid之后却一片空白,查看console出现许多Failed to load resource: net::ERR_F ...
- LeetCode 12 - 整数转罗马数字 - [简单模拟]
题目链接:https://leetcode-cn.com/problems/integer-to-roman/ 题解: 把 $1,4,5,9,10,40,50, \cdots, 900, 1000$ ...
- JavaScript面向对象之get和set设置读写属性
之前我们通过this和prototype申明的属性都是可读写的属性,如果想实现单独控制,就必须使用get和set存取期. 基本方法的 步骤一般包含两个步骤,1,使用var关键字定义一个私有属性作为中间 ...