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:获取 ...
随机推荐
- jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题
今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...
- 【thinkphp5.1】 endroid/qrcode 二维码生成
composer 链接: https://packagist.org/packages/endroid/qrcode 注意:PHP版本 要求 7.1+ 1. 使用 composer 安装 endroi ...
- Spring Security http标签的use-expressions="true"属性
如果声明为true,那么在access属性要用hasRole()这样写: <intercept-url pattern="/secure/extreme/**" access ...
- react 动态修改 document.title
装饰器 // withComponents/withHeaderBar.js import React, { Component } from "react"; import He ...
- Web前端攻击方式及防御措施
一.XSS [Cross Site Script]跨站脚本攻击 恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户 ...
- phpcms栏目标签调用
$CATEGORY[$catid][catid] 栏目id $CATEGORY[$catid][module] 栏目所在的模块 $C ...
- LomBok插件的使用
LomBok插件的使用 By Zhai 简介: LomBok是一个通过简单注解就可以减少一些冗余代码编写的小工具.例如 @Setter @Getter 用于实例类上该类就不需要写set get 方法. ...
- Can't connect to MySQL server (10060) MySQL
x 搜索了一下N篇解决方案都是在说以下3种原因... .{"防火墙的问题":["防火墙未关闭","服务器上防火墙端口未开放"]} 2.[&q ...
- LeetCode 521 Longest Uncommon Subsequence I 解题报告
题目要求 Given a group of two strings, you need to find the longest uncommon subsequence of this group o ...
- WCF中的ServiceHost初始化两种方式
1 代码方式 using(ServiceHost host=new ServiceHost(typeof(HelloWordService))) { host.AddServiceEndpoint(t ...