提示:
VUE学习:vue基础22————动画04:动画练习
前言
本文学习Vue的动画相关内容。
提示:以下是本篇文章正文内容,下面案例可供参考
动画
动画练习
组件切换案例
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
html,body,#app{
height: 100%;
overflow: hidden;
}
.title{
height: 60px;
background-color: #333;
color: #fff;
text-align: center;
font-size: 24px;
line-height: 60px;
}
.page{
/*calc()函数是css的计算属性,可以在小括号内进行基础的数值运算*/
height: calc(100% - 60px - 40px);
}
.tabs{
height: 50px;
line-height: 30px;
text-align: center;
background-color: #333;
color: #fff;
position: relative;
}
.tabs-item{
float: left;
width: 25%;
}
.tabs-active{
position: absolute;
width: 25%;
height: 100%;
background-color: #000;
color: #fff;
left: 0;
top: 0;
transition: all .3s;
}
/*vue过渡样式*/
.v-enter-active,.v-leave-active{
transition: all .3s;
}
.v-enter-to,.v-leave{
transform: translate(0);
}
.v-enter{
transform: translate(100%);
}
</style>
</head>
<body>
<div id="app">
<div class="title">{{title}}</div>
<transition mode="out-in">
<component :is="nowPage"></component>
</transition>
<div class="tabs">
<div class="tabs-item" v-for="(tab,index) in tabList" :key="index"
@click="change(index,tab.content,tab.page)">{{tab.content}}</div>
<div class="tabs-active" :style="{'left':left}">{{title}}</div>
</div>
</div>
<template id="home">
<div style="background-color: pink" class="page">首页</div>
</template>
<template id="news">
<div style="background-color: green" class="page">新闻</div>
</template>
<template id="mine">
<div style="background-color: yellow" class="page">我的</div>
</template>
<template id="about">
<div style="background-color: blue" class="page">关于</div>
</template>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
tabList:[
{color:"pink",content:"首页",page:"home"},
{color:"green",content:"新闻",page:"news"},
{color:"yellow",content:"我的",page:"mine"},
{color:"blue",content:"关于",page:"about"}
],
nowPage:"home",
title:"首页",
left:0
},
methods: {
change(index,content,page){
this.nowPage=page;
this.title=content;
this.left=(index*25)+"%";
}
},
components:{
home:{
template:"#home"
},
news:{
template:"#news"
},
mine:{
template:"#mine"
},
about:{
template:"#about"
}
}
});
</script>