目录
0x01 单元素/组件的过渡
#淡入淡出效果:
复制官网文档上css样式
用<transition name='fade'></transition>将需要淡入淡出的部分包住
适用于:
条件渲染:v-if
条件展示:v-show
等控制的组件的淡入淡出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet"> -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script> -->
<link rel="stylesheet" href="common/bootstrap.css">
<script src="common/jquery.js"></script>
<script src="common/vue.js"></script>
<script src='common/bootstrap.js'></script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<div class="page-title">
<h1>VueLab</h1>
</div>
</div>
<div id="app">
<button class="btn btn-primary" @click="isShow=!isShow">点击</button>
<transition name='fade'>
<p v-show="isShow">Hello DataBank</p>
</transition>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
isShow:true
},
components:{
}
})
</script>
</html>
当淡入时,会触发beforeEnter事件
当淡出时,会触发afterLeave事件
<body>
<div class="container">
<div class="page-header">
<div class="page-title">
<h1>VueLab</h1>
</div>
</div>
<div id="app">
<button class="btn btn-primary" @click="isShow=!isShow">点击</button>
<transition name='fade' @before-enter='beforeEnter' @after-leave='afterLeave'>
<p v-show="isShow">Hello DataBank</p>
</transition>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
isShow:true
},
components:{
},
methods:{
beforeEnter:function(){
console.log('beforeEnter');
},
afterLeave:function(){
console.log('afterLeave');
}
}
})
</script>
0x02 多个元素的过渡:
当有相同标签名的元素切换时,需要通过 key
attribute 设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要,给在 <transition>
组件中的多个元素设置 key 是一个更好的实践。
同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了过渡模式
-
in-out
:先淡入,淡入完成后,另一个元素再淡出 -
out-in
:先淡出,淡出完成后,另一个元素再淡入
<body>
<div class="container">
<div class="page-header">
<div class="page-title">
<h1>VueLab</h1>
</div>
</div>
<div id="app">
<button class="btn btn-primary" @click="isShow=!isShow">点击</button>
<transition name='fade' mode="out-in" @before-enter='beforeEnter' @after-leave='afterLeave'>
<p v-if="isShow" key='1'>Hello DataBank</p>
<p v-else key='2'>Rui Shang</p>
</transition>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
isShow:true
},
components:{
},
methods:{
beforeEnter:function(){
console.log('beforeEnter');
},
afterLeave:function(){
console.log('afterLeave');
}
}
})
</script>
0x03 多个组件的过渡
<body>
<div class="container">
<div class="page-header">
<div class="page-title">
<h1>VueLab</h1>
</div>
</div>
<div id="app">
<div class='label label-danger' @click='changeCom("coma")'>coma</div>
<div class='label label-success' @click='changeCom("comb")'>comb</div>
<transition name='fade' mode='out-in'>
<component :is='currentCom'></component>
</transition>
</div>
</div>
</body>
<script>
var coma={
template:'<p>this is coma</p>',
};
var comb={
template:'<p>this is comb</p>'
};
var vm = new Vue({
el:'#app',
data:{
currentCom:''
},
components:{
'coma':coma,
'comb':comb
},
methods:{
changeCom:function(data){
this.currentCom = data;
}
}
})
</script>
0x04 列表的过渡
使用<transition-group></transition-group>
每个元素需要有一个属性 key ,且key必须唯一
transition-group默认解释为span标签,可以通过tag属性来设置transition-group变成什么标签
过渡模式 mode不可用
效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet"> -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.js"></script> -->
<link rel="stylesheet" href="common/bootstrap.css">
<script src="common/jquery.js"></script>
<script src="common/vue.js"></script>
<script src='common/bootstrap.js'></script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.label{
display:inline-block;
margin-top:15px!important;
margin-right:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<div class="page-title">
<h1>VueLab2</h1>
</div>
</div>
<div id="app">
<div class="row">
<div class="col-xs-8">
<input type="text" class='form-control' placeholder='标签' v-model="user">
</div>
<div class="col-xs-4">
<button class='btn btn-danger' @click='addUser'>添加标签</button>
</div>
</div>
<transition-group tag='div' name='fade'>
<div class='label label-danger' v-for="(value,index) in arr" :key='index'>
{{value}}
<span class='glyphicon glyphicon-remove' @click='delUser(index)'></span>
</div>
</transition-group>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
user:'',
arr:[]
},
methods:{
addUser:function(){
this.arr.push(this.user);
this.user='';
},
delUser:function(index){
// 从索引开始删除一个
this.arr.splice(index,1);
}
}
})
</script>
</html>
0x05 自定义过渡的类名
百度搜索:animate.css 下载对应的css文件
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
transition标签 可以添加如下属性来使用第三方动画库:
enter-class 设置进入的样式
enter-active-class
leave-class 设置出去的样式
leave-active-class
第三方动画库的使用方法:
animated 对应的动画名
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<link rel="stylesheet" href="common/bootstrap.css">
<script src="common/jquery.js"></script>
<script src="common/vue.js"></script>
<script src='common/bootstrap.js'></script>
<link rel="stylesheet" href="common/animate.css">
</head>
<body>
<div class="container">
<div class="page-header">
<div class="page-title">
<h1>VueLab2</h1>
</div>
</div>
<div id="app">
<transition name='fade' enter-active-class="animated rollIn"
leave-active-class="animated rollOut" mode='out-in'>
<p v-if='isShow' key='1'>hello</p>
<p v-else>Hello DataBank</p>
</transition>
<button class='btn btn-primary' @click='isShow=!isShow'>展示</button>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
isShow:true,
},
methods:{
}
})
</script>
</html>