vue+动画实现tab栏下划线切换

最新推荐文章于 2023-08-23 10:12:46 发布

度阡_eve

最新推荐文章于 2023-08-23 10:12:46 发布

阅读量3.2k

点赞数 2

分类专栏： vue 文章标签： vue.js css javascript html5 css3

本文链接：https://blog.csdn.net/weixin_48419553/article/details/115800357

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

(vue+过渡实现tab栏下划线切换)

点击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>