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:获取 ...
随机推荐
- 给新手学习Java的建议
有很多的朋友都在问我一个同样的问题:新手应该如何能学好Java.我做了一个简单的总结,分享给大家: 1-信念:无论你是选择JAVA,C,C#,C++....还是其他的语言编程,信念是第一位,只有相信自 ...
- codeforces 1106 E
显然是dp啊,dp[i][j]表示到时间i打扰了j次的最小收益 显然要排序,官方题解说set没看懂,优先队列就行啊. 按照时间排序,显然这样扫的话可以保证当前时间点的点在优先队列里吧, 然后有打断和不 ...
- 网站favicon图标的显示问题
今天在微信开发者工具发现一个错误,说是找不到favicon.ico这个文件. 这个就是标签式浏览器显示在页面title前面的小图标,移动端也没什么用,所以一直没在意,今天有空就研究了一下,发现还是有点 ...
- mac 初次配置apache，及mac下安装mysql
先打开apache,在浏览器上输入 localhost 回车后会如果屏幕上显示:It works! 如下图: 这说明你的apache已开启 mac 下apache配置(mac自带apache ...
- 关于vue-cli创建项目（小白）(2)mock数据
mock数据,好处,前后端分离,不用等后端的真实接口,就可以用axios(ek sju s 好像这么读,原谅本人总是根据读音写单词)请求数据了. 一,安装所需插件 根据不同需求选择安装环境,mockj ...
- 网页分帧操作<frameset>,<iframe>标签
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- vins-mono的边缘化分析
##marg 基础 摘自贺一家的博客 在我们这个工科领域,它来源于概率论中的边际分布(marginal distribution).如从联合分布p(x,y)去掉y得到p(x),也就是说从一系列随机 ...
- Windows 10 Creators Update [ISO官方镜像][15063][1703][x64][x86][创意者更新正式版]
请把下载地址手动复制到迅雷里面去,谢谢! [64 位简体中文专业/家庭版] 文件名:cn_windows_10_multiple_editions_version_1703_updated_march ...
- LeetCode 448 Find All Numbers Disappeared in an Array 解题报告
题目要求 Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice a ...
- 【Python全栈-后端开发】Django进阶之Model操作复习
Django进阶之Model操作复习 一.字段 AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - ...