追随动画
hover示例代码
<style scoped lang="scss">
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.tab-container {
border: 1px solid #eee;
margin: 50px auto;
padding: 20px 0;
.title{
padding-left:30px;
font-size: 12px;
color:#ddd;
}
.tabs {
display: flex;
justify-content: center;
align-items: center;
li {
height: 40px;
line-height: 40px;
padding: 0 15px;
cursor: pointer;
position: relative;
font-size: 18px;
color: #909399;
background-color: #fff;
&::after {
content: "";
width: 0;
height: 2px;
background-color: #00adb5;
position: absolute;
left: 100%;
bottom: 0;
transition: all .4s;
}
&:hover {
color: #00adb5;
&::after {
width: 100%;
left: 0;
transition-delay: 0.1s;
}
& ~ li::after {
left: 0;
}
}
}
}
}
</style>
<template>
<div class="tab-container">
<div class="title">hover to change</div>
<ul class="tabs">
<li class="tab-item" v-for="(tabName,index) in lists" :key="index">{{tabName}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'hoverTab',
data() {
return {
lists: ['前端','后端','算法','区块链','大数据','架构设计','DBA']
}
},
}
</script>
点击追随Tab动画
示例代码
<style scoped lang="scss">
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.tab-container2 {
border: 1px solid #eee;
margin: 50px auto;
padding: 20px 0;
.title{
padding-left:30px;
font-size: 12px;
color:#ddd;
}
.tabs {
display: flex;
justify-content: center;
align-items: center;
li {
height: 40px;
line-height: 40px;
padding: 0 15px;
cursor: pointer;
position: relative;
font-size: 18px;
color: #909399;
background-color: #fff;
&::after {
content: "";
width: 0;
height: 2px;
background-color: #00adb5;
position: absolute;
left: 100%;
bottom: 0;
transition: all .4s;
}
&.active {
color: #00adb5;
&::after {
width: 100%;
left: 0;
transition-delay: 0.1s;
}
& ~ li::after {
left: 0;
}
}
}
}
}
</style>
<template>
<div class="tab-container2">
<div class="title">click to change</div>
<ul class="tabs">
<li class="tab-item" v-for="(listName,index) in lists" :key="index" :class="{active:isActive==index}" @click="setActive(index)">{{listName}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'clickTab',
data() {
return {
isActive: 1,
lists:['html','css','javascript','vue','react','angular']
}
},
methods: {
setActive(index) {
this.isActive = index
}
}
}
</script>
中间展开
<style scoped lang="scss">
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.tab-container3 {
border: 1px solid #eee;
margin: 50px auto;
padding: 20px 0;
.title {
padding-left: 30px;
font-size: 12px;
color: #ddd;
}
.tabs {
display: flex;
justify-content: center;
align-items: center;
li {
height: 40px;
line-height: 40px;
padding: 0 15px;
cursor: pointer;
position: relative;
font-size: 18px;
color: #909399;
background-color: #fff;
&::after {
content: "";
width: 0;
height: 2px;
background-color: #00adb5;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 0;
transition: width .4s;
}
}
li.active {
&::after {
width: 100%;
}
}
}
}
</style>
<template>
<div class="tab-container3">
<div class="title">click to change</div>
<ul class="tabs">
<li class="tab-item" v-for="n in 5"
:key="n"
:class="{active:isActive==n}"
@click="setActive(n)">tab{{n}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'centerTab',
data() {
return {
isActive: 1
}
},
methods: {
setActive(index) {
this.isActive = index
}
}
}
</script>
tab底部圆形边框
<style scoped lang="scss">
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
$radius: 10px;
$bg-color: #eee;
$active-color: #00adb5;
.tab-container2 {
border: 1px solid #eee;
margin: 50px auto;
padding: 20px 0;
.title {
padding-left: 30px;
font-size: 12px;
color: #ddd;
margin-bottom: 15px;
}
.tabs {
display: flex;
justify-content: center;
align-items: center;
background: $active-color;
li {
height: 40px;
line-height: 40px;
padding: 0 15px;
cursor: pointer;
position: relative;
font-size: 18px;
color: #fff;
background: $active-color;
transition: color 0.2s, height 0.2s, margin 0.2s;
border-radius: $radius;
position: relative;
&:not(:first-of-type)::before,
&:not(:first-of-type)::after {
content: "";
bottom: 0;
width: $radius;
height: $radius;
position: absolute;
}
&.active {
color: #909399;
background: $bg-color;
height: 50px;
line-height: 50px;
margin-top: -10px;
border-radius: $radius $radius 0 0;
&::before {
left: -$radius;
border-radius: 0 0 $radius 0;
background: $active-color;
z-index: 2;
}
&::after {
left: -$radius;
background: $bg-color;
z-index: 1;
}
}
&.active + li {
&::before {
left: 0;
background: $bg-color;
}
&::after {
border-radius: 0 0 0 $radius;
left: 0;
background: $active-color;
}
}
}
}
}
</style>
<template>
<div class="tab-container2">
<div class="title">click to change</div>
<ul class="tabs">
<li
class="tab-item"
v-for="n in 5"
:key="n"
:class="{ active: isActive == n }"
@click="setActive(n)"
>
tab{{ n }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "circleTab",
data() {
return {
isActive: 2
};
},
methods: {
setActive(index) {
this.isActive = index;
}
}
};
</script>