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

 

前言

在【uni-app|vue组件实现鼠标滑过平滑过渡动效之播放与暂停】这篇文章中，小凡跟大家详细分析了整个动效的原理以及实现过程，那么，今天，小凡再来跟大家分享一个类似的鼠标滑过平滑过渡效果，相信大家在有了上一篇文章的基础上，再来学习这一篇文章中的动效原理的话，应该就会变的简单了许多。

---

一、效果展示及思路分析

1、效果展示

2、思路分析

• 第一部分 圆形按钮形状

• 第二部分 按钮中间三条白色平行线（表示菜单）

• 第三部分 按钮中间两条白色交叉线（表示关闭）

重点：接下来就是解决动效平滑过渡的问题了，我们只需要利用transfrom属性，设置元素的Y轴偏移量以及旋转角度；利用filter属性，灵活运用元素的阴影；利用transition属性，实现两种状态的平滑切换。

二、实现步骤

1.准备工作

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

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

2.代码实现

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

​
<template>
	<view class="container">
		<view><FloatingButton></FloatingButton></view>
	</view>
</template>

<script>
	import FloatingButton from '@/components/FloatingButton.vue'
	export default {
		components:{
			FloatingButton
		}
	}
</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组件FloatingButton.vue

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

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

<template>
	<view class="floating-btn"></view>
</template>

•  设置view元素的样式

.floating-btn{
		position: relative;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		background-image: linear-gradient(45deg, #52ffaf, #2196f3);
		box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
	}

•  利用CSS:before及:after选择器，创建伪元素

.floating-btn::before,
	.floating-btn::after{
		content: '';
		position: absolute;
		left: 50%;
		top: 0;
		display: block;
		margin-left: -9px;
		border-radius: 3px;
		width: 18px;
		height: 3px;
		background-color: white;
        
        /*设置元素过渡效果 实现平滑变化的关键*/
		transition: all 0.2s ease;
	}

分析：此时的两个伪元素，都被设置成了两个长方形，并且重叠在一起，都被定位到圆形按钮的顶部

•  创建菜单图形

 首先将before选择器创建的伪元素移动到合适的位置上，然后在利用filter过滤器属性，添加该伪元素的阴影，把阴影设置成白色，通过设置阴影与伪元素的位置从而变成两个平行的长方形。（牛！真牛！！实在是牛！！！）

 

.floating-btn::before{
		transform: translateY(12px);
		/*利用滤镜，将元素的阴影设置成白色，从而形成第二个横线*/
		filter:drop-shadow(0 6px 0 white);
	}

 接下来，将after选择器创建的伪元素定位到合适的位置上，这样就做出了三条横线的效果了。

.floating-btn::after{
		transform: translateY(24px);
	}

• 为伪元素添加鼠标滑过时菜单与关闭状态平滑切换效果

分析：为before选择器创建的伪元素设置hover选择器中的样式，将过滤器设置为none，这样刚才的阴影形成的横线就不显示了，接着，设置元素在Y轴的偏移量，然后逆时针旋转45度，使其变成差号符号的其中一条斜线

.floating-btn:hover::before{
		filter: none;
		transform: translateY(18px) rotate(-45deg);
	}

分析：为after选择器创建的伪元素设置hover选择器中的样式，设置元素在Y轴的偏移量，然后顺时针旋转45度，使其变成差号符号的另外一条斜线

.floating-btn:hover::after{
		transform: translateY(18px) rotate(45deg);
	}

总结

至此，这个平滑过渡动效就讲完了。怎么样？在页面中，当你用鼠标滑过菜单按钮时，是不是可以看到里面的三条横线平滑的变成了差号标志的关闭按钮，然后又平滑的变回了三条横线的菜单按钮了呢？如果能看到这个效果，那么恭喜你，一不小心，你又掌握了一个“不得了”的技能，赶快跟你的小伙伴们去分享吧，够你得瑟一阵子的了。O(∩_∩)O哈哈~

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

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

相关文章推荐：

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