详细解析：uni-app|vue组件实现鼠标滑过平滑过渡动效之进度条

前言

在【uni-app|vue组件实现鼠标滑过平滑过渡动效之播放与暂停】这篇文章中，小凡跟大家详细分析了整个动效的原理以及实现过程，那么，今天，小凡再来跟大家分享一个长条状进度条鼠标滑过平滑过渡效果，相信大家在有了上一篇文章的学习基础后，再来学习本篇中的动效的话，就会很容易的搞定了！

---

一、效果展示及思路分析

1、效果展示

2、思路分析

• 第一部分 底部灰色长条

• 第二部分 进度条

• 第三部分 百分比文字

重点：接下来就是解决动效平滑过渡的问题了，我们只需要利用transition属性，实现两种状态的平滑切换。

二、实现步骤

1.准备工作

在正式开始写代码之前，需要先下载相应的IDE，以及进行必要的配置工作。

小凡在【uni-app项目|vue组件形式实现的科技感loading纯CSS动效】文章中详细讲解过如何进行必要的配置工作，这里就不再重复讲解了，大家可以点击右侧链接查看→科技感Loading动效详解

2.代码实现

（1）在home.vue应用启动页中添加一个布局，引入并注册自定义vue组件，在模版中使用自定义vue组件

<template>
	<view class="container">
		<view><ProgramBar></ProgramBar></view>
	</view>
</template>

<script>
	import ProgramBar from '@/components/ProgramBar.vue'
	export default {
		components:{
			ProgramBar
		}
	}
</script>

<style scoped>
	.container{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-template-rows: repeat(3,1fr);
		height: 100vh;
		justify-items: center;
		align-items: center;
		max-width: 800px;
		margin: 0 auto;
	}
	/* transform使z-index属性失效 
	   所以在引入自定义控件时，需要在外层包裹一层view元素
	*/
	.container > view{
		transform: scale(1.5);
	}
</style>

（2） 编写自定义vue组件ProgramBar.vue

注意：样式代码并没有考虑浏览器兼容性问题，本代码的测试环境是谷歌浏览器

•  在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为program-bar（嗯，你没有看错，依然就只有这么一个view元素，通过CSS样式就能实现文章开头展示的平滑切换动效！简单的不要不要的！O(∩_∩)O）

<template>
	<view class="program-bar"></view>
</template>

•  设置view元素的样式（底部灰色长条）

.program-bar{
		position: relative;
		border-radius: 8px;
		width: 60px;
		height: 20px;
		background-color: #eeeeee;
		transform: translateY(-34%);
	}

•  利用CSS:before选择器，创建伪元素（可变化的进度条）

.program-bar::before{
		content: '';

        /*相对定位*/
		postion: relative;

        /*显示层级设置为1，避免被view元素覆盖*/
		z-index: 1;
        
        /*定义进度条外形、大小和背景图*/
		display: block;
		border-radius: 8px;
		height: 20px;
		width: 50%;
		background-image: linear-gradient(0deg, #ff7a3b, #ffc107);

        /*元素外层阴影*/
		box-shadow: 0 1px 2px 0 #ff7a3ba3;

        /*元素形状阴影*/
		filter: drop-shadow(2px 0 1px rgba(0,0,0,0.2));

        /*设置元素过渡效果 平滑变化的关键属性*/
		transition: all 0.2s ease;
	}

说明：同时设置box-shadow属性以及filter: drop-shadow()，是为了渲染出更加有立体感的进度条效果

•  利用CSS:after选择器，创建伪元素（进度条下方的百分比数字）

.program-bar::after{
        /*设置文字内容*/
		content: '50%';

        /*绝对定位元素*/
		position: absolute;

        /*定位元素位置*/
		left: 50%;

        /*设置字体样式*/
		transform: scale(0.9) translate(-50%, 20%);
		font-size: 12px;
		font-weight: bold;
		color: #54390f;
	}

• 为伪元素添加鼠标滑过时平滑切换效果

分析：为before选择器创建的伪元素设置hover选择器中的样式，将元素的width属性设置为100%，这样，当鼠标滑过进度条时，可以平滑的将进度条变成100%

.program-bar:hover::before{
		width: 100%;
	}

分析：为after选择器创建的伪元素设置hover选择器中的样式，设置content属性为100%，因为此时的进度条长度已经变成了100%，所以进度条文字也需要跟着变化

.program-bar:hover::after{
		content: '100%';
	}

总结

至此，这个平滑过渡动效就讲完了。相对于前面分享的动效，小凡本次分享的动效实现起来就简单多了。怎么样？在页面中，当你用鼠标滑过进度条时，是不是可以看到里面的进度条平滑的变成了100%，同时，下面的进度条文字也变成了100%了，然后进度条又平滑的变回了50%，下面的文字也同时变回了开始时的50%了呢？

如果喜欢小凡的这篇文章，记得点赞、收藏和分享哦！也欢迎大家在评论区留言。

扫描二维码关注我的公众号，可以第一时间收到我的更新信息哦！

相关文章推荐：

• 详细解析：uni-app|vue组件实现鼠标滑过平滑过渡动效之播放与暂停
• 详细解析：uni-app|vue组件实现鼠标滑过平滑过渡动效之菜单与关闭