h5学习笔记：底部菜单色块移动效果

最新推荐文章于 2023-01-17 16:32:52 发布

hero82748274

最新推荐文章于 2023-01-17 16:32:52 发布

阅读量559

点赞数

分类专栏： javascript和Egret相关

本文链接：https://blog.csdn.net/hero82748274/article/details/107136721

版权

javascript和Egret相关专栏收录该内容

97 篇文章 4 订阅

订阅专栏

在这里插入图片描述
上周的一个项目中，发现配合css过渡动画可以做出一些效果不错的视觉。
css的过渡动画可以为底部的菜单添加一些移动的效果产生一些动态变化的效果。下面是一个基于vuejs的菜单切换的变换的效果。其原理采取了一个动态样式的方式对底部的菜单的色块进行样式变化。

主要的代码在这里，采取移动+过渡的时间指定，配合起来就可以实现对应的效果。

<div class="ui-navs-line" :style="{transform:`translateX(${offx}px)`,'transition-duration':'0.3s'}">
</div>

onSelectNavItem:function(index){
	var w = document.documentElement.clientWidth/4;//计算每一个菜单宽度
	this.offx = index * w;//乘以对应索引计算移动的坐标x
}

看如下的实验代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航移动</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
	</head>
	<style>
		html,body,div,p{
			margin: 0;
			padding: 0;
		}
		.ui-navs{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			box-sizing: border-box;
			border-bottom: 1px solid #F5F5F5;
		}
		
		.ui-nav-item{
			width: 25%;
			text-align: center;
			height: 44px;
			line-height: 44px;		
		}
		
		.ui-navs-line{
			width: 25%;
			height: 2px;
			background:green;
			border-radius: 2px;			 
		}
				
	</style>
	<body>
		<div id="app">
			<div class="ui-navs">
				<div class="ui-nav-item" @click="onSelectNavItem(0)">菜单一</div>
				<div class="ui-nav-item" @click="onSelectNavItem(1)">菜单二</div>
				<div class="ui-nav-item" @click="onSelectNavItem(2)">菜单三</div>
				<div class="ui-nav-item" @click="onSelectNavItem(3)">菜单四</div>
			</div>
			<div class="ui-navs-line" :style="{transform:`translateX(${offx}px)`,'transition-duration':'0.3s'}">
				
			</div>	
			
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<script type="text/javascript">
			
			var vue = new Vue({
				el:"#app",
				data:{
					offx:0
				},
			    methods:{
					onSelectNavItem:function(index){
					  var w = document.documentElement.clientWidth/4;
					  this.offx = index * w;
					}
				}
				
			})
			
		</script>
		
		
	</body>
</html>