vue+动画实现tab栏下划线切换
(vue+过渡实现tab栏下划线切换)在网上看了很多都是下划线跟随效果,所以今天写了一个可以点击时下划线的位置会有动画效果的。核心代码是 改变它的left值:return (10 + this.show * 130) + 'px'配合使用css的过渡效果:transition: all 1s;全部代码如下,使用了组件。<!DOCTYPE html><html><hea
·
(vue+过渡实现tab栏下划线切换)
在网上看了很多都是下划线跟随效果,所以今天写了一个可以点击时下划线的位置会有动画效果的。
核心代码是 改变它的left值:
return (10 + this.show * 130) + 'px'
配合使用css的过渡效果:transition: all 1s;
全部代码如下,使用了组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<script src="js/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f4f4f4;
}
.login_panel {
width: 400px;
height: 300px;
background-color: #fff;
margin: 0 auto;
border-radius: 20px;
box-shadow: 0px 0px 10px #e8e8e8;
position: relative;
overflow: hidden;
}
h2 {
text-align: center;
padding: 10px;
}
h2 img {
width: 40px;
vertical-align: bottom;
}
.tab {
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 0px;
cursor: pointer;
}
.tab a {
width: 130px;
display: inline-block;
}
.input_style{
width: 350px;
height: 50px;
padding-left: 15px;
margin-left: 15px;
margin-bottom: 10px;
outline: none;
border: none;
background-color: #f7f7f7;
border-radius: 10px;
position: relative;
}
.input_style:focus{
border: 1px solid #8EC5FC;
/* #8EC5FC */
}
.btn_login{
width: 350px;
height: 50px;
border-radius: 10px;
border: none;
outline: none;
margin-left: 15px;
margin-top: 20px;
color: #fff;
font-size: 18px;
background-image: linear-gradient(#ABDCFF,#0396FF);
}
.getCode_style{
position: absolute;
right: 30px;
top: 170px;
width: 90px;
height: 30px;
color: #0396FF;
border: 1px solid #ABDCFF;
text-align: center;
line-height: 30px;
border-radius: 10px;
cursor: pointer;
}
.img_login_img{
margin-left: 130px;
}
.img_login_p{
margin-left: 120px;
}
.firstLine{
width: 130px;
height: 3px;
background-color: #0396FF;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
left: 10px;
top: -15px;
transition: all 1s;
}
</style>
</head>
<body>
<div id="app" class="loginBox">
<h2><img src="img/weiguang_img.png">微光登录</h2>
<div class="login_panel">
<!-- tab栏目 -->
<div class="tab">
<!-- show点击后当前的值,index是下标,两个相等表示两者对应 -->
<a v-for="(item,index) in list" @click="show_index(index)" :class="{'tab_current':show == index}">{{item.name}}</a>
</div>
<!-- 线条 -->
<div class="firstLine" :style="{left:tryme}"></div>
<transition enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
mode="out-in">
<component :is="componentName"></component> <!-- 取代三个模版 -->
</transition>
</div>
</div>
<!-- 帐号登录组件 -->
<template id="zhanghaoTmp">
<div>
<p>
<input type="text" id="user" placeholder="请输入账号" class="input_style">
</p>
<p>
<input type="text" id="pwd" placeholder="请输入密码" class="input_style">
</p>
<button class="btn_login">登 录</button>
</div>
</template>
<!-- 手机号码组件 -->
<template id="telLoginTmp">
<div>
<p>
<input type="text" id="tel" placeholder="请输入手机号码" class="input_style">
</p>
<p>
<input type="text" id="code" placeholder="请输入验证码" class="input_style">
<a class="getCode_style">获取验证码</a>
</p>
<button class="btn_login">登 录</button>
</div>
</template>
<!-- 二维码组件 -->
<template id="codeLoginTmp">
<div>
<img src="img/code.PNG" class="img_login_img">
<p class="img_login_p">请使用微光APP扫码登录</p>
</div>
</template>
<script>
Vue.component('zhanghang-login',{
template:'#zhanghaoTmp'
})
Vue.component('tel-login',{
template:'#telLoginTmp'
})
Vue.component('code-login',{
template:'#codeLoginTmp'
})
var vm = new Vue({
el: '#app',
data: {
show: 0,
list:[{name:'账号登录'},{name:'短信登录'},{name:'扫码登录'}],
componentName:'zhanghang-login'
},
computed:{
tryme(){
return (10 + this.show * 130) + 'px'
}
},
methods: {
show_index(index){
this.show = index;
if(this.show == 0){
this.componentName = 'zhanghang-login'
} else if(this.show == 1){
this.componentName = 'tel-login'
} else {
this.componentName = 'code-login'
}
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)