前言
我们在做一些状态切换的效果时，如果不做任何处理的话，总感觉变化的很突兀；虽然也能够将准确的操作信息传递给用户，但总感觉还是缺了点设计感，那么，本篇文章，小凡就来跟大家分享一个播放与暂停状态切换的鼠标滑过平滑过渡效果。
一、效果展示及思路分析
1、效果展示
|
|
|
|
|
|
2、思路分析
-
第一部分 圆形按钮形状
-
第二部分 按钮中间白色三角形（表示开始播放）
-
第三部分 按钮中间两条白色的竖线（表示暂停播放）
重点：接下来就是解决动效平滑过渡的问题了，我们需要综合利用opacity属性，设置元素的透明级别；利用transform属性，设置元素的缩放；利用transition属性，设置元素的过渡效果；利用will-change属性，提高页面的反映速度。
二、实现步骤
1.准备工作
在正式开始写代码之前，需要先下载相应的IDE，以及进行必要的配置工作。
小凡在【uni-app项目|vue组件形式实现的科技感loading纯CSS动效】文章中详细讲解过如何进行必要的配置工作，这里就不再重复讲解了，大家可以点击右侧链接查看→科技感Loading动效详解
2.代码实现
（1）在home.vue应用启动页中添加一个布局，引入并注册自定义vue组件，在模版中使用自定义vue组件
<template>
<view class="container">
<view><PlayButton></PlayButton></view>
</view>
</template>
<script>
import PlayButton from '@/components/PlayButton.vue'
export default {
components:{
PlayButton
}
}
</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组件PlayButton.vue
注意：样式代码并没有考虑浏览器兼容性问题，本代码的测试环境是谷歌浏览器
- 在模版代码块中，添加uni-app提供的view组件元素（类似于HTML中的div）并设置class属性为play-button（嗯，你没有看错，依然就只有这么一个view元素，通过CSS样式就能实现文章开头展示的平滑切换动效！神奇的不要不要的！O(∩_∩)O哈哈~）
<template>
<view class="play-button"></view>
</template>- 设置view元素的样式
.play-button{
/*相对定位 作为绝对定位元素的父容器*/
position: relative;
/*定义元素大小、形状、背景图以及外层阴影*/
width: 40px;
height: 40px;
border-radius: 100%;
background-image: linear-gradient(45deg, #5298ff, #ff00a8);
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);
}- 利用CSS:before选择器，创建伪元素（按钮中间的白色三角）
我们先分析一下下面这段代码：
.play-button::before{
......
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: white;
border-top-width: 8px;
border-bottom-width: 8px;
......
}分析：该伪元素的样式中，将width和height都设置成了0，同时又将border设置成了10px大小的透明颜色，然后又把border左侧的颜色设置成了白色，最后又设置了一下上边框和下边框的宽度，这样就能出现我们想要的三角形吗？为了一探究竟，接下来，我对上面这段代码稍作修改，将上、下、左、右边框分别设置了不同的颜色，我们来看一下，此时页面所呈现的效果。
.play-button::before{
......
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: white;
border-right-color: yellow;
border-top-color: green;
border-bottom-color: #4CD964;
/* border-top-width: 8px;
border-bottom-width: 8px; */
......
}
说明：从图中我们不难看出，元素的上下左右边框其实都是一个三角形，这样我们就可以利用这个特性，设计出我们想要的效果来了！（嗯嗯，别露出一脸惊讶的样子，CSS就是这么神奇，需要我们用心去理解）以下是完整的样式代码
.play-button::before{
content: '';
/*绝对定位元素*/
position: absolute;
/*设置元素位置*/
left: 21px;
top: 50%;
margin-left: -4px;
margin-top: -8px;
/*通过设置左边框巧妙的生成三角图形*/
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: white;
border-top-width: 8px;
border-bottom-width: 8px;
/*设置图形阴影*/
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
/* 设置元素过渡效果 实现平滑过渡的关键属性 */
transition: all 0.2s ease;
/*这是一个实验中的功能，此属性为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，
这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分
复杂的计算工作提前准备好，使页面的反应更为快速灵敏。*/
will-change: border-width, height, left;
}- 利用CSS:after选择器，创建伪元素（按钮中的两条白色竖线--暂停）
我们还是先来分析一下下面这段代码：
.play-button::after{
......
width: 0;
height: 16px;
border: 5px solid transparent;
border-width: 0 0 0 5px;
border-left-color: white;
......
}分析：与上一个伪元素一样，这里将width设置成0，而将height设置成16px，这时将元素边框设置成透明颜色，只将左边框的大小设置为5px，颜色设置为白色，大家可以想象一下，此时页面应该呈现出一个什么样的图形？对，没错，是一个白色的长方形！为什么不是一个三角图形了呢？那是因为我们给这个元素设置了16px的高度，于是乎，三角图形也跟着长了个子，变成了“高富帅”。以下是完整的代码：
.play-button::after{
content: '';
/*绝对定位元素*/
position: absolute;
/*设置元素位置*/
right: 16px;
top: 50%;
margin-right: -4px;
margin-top: -8px;
/*通过设置元素边框样式得到长方形图形*/
width: 0;
height: 16px;
border: 5px solid transparent;
border-width: 0 0 0 5px;
border-left-color: white;
/*设置元素阴影*/
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
/* 设置一个元素的透明度级别，从0.0（完全透明）到1.0（完全不透明） */
opacity: 0;
/*设置元素的缩放比例为0*/
transform: scale(0);
/* 设置元素过渡效果 实现平滑变化的关键属性 */
transition: all 0.2s ease;
}注意：代码中的opacity: 0以及transform: scale(0);是为了将该元素暂时隐藏，因为只有当鼠标滑过该按钮时才需要将元素显示出来，如果不隐藏的话，后续的动画效果也无法实现。
- 为伪元素添加鼠标滑过时播放与暂停状态平滑切换效果
分析：为before选择器创建的伪元素设置hover选择器中的样式，设置一下元素的高度，将元素左边框变成一个长方形，同时改变一下它的位置，使其能够与after选择器创建的伪元素一起组合成一对长方形，变成暂停图标；
.play-button:hover::before{
border-width: 0 0 0 5px;
height: 16px;
left: 16px;
}分析：为after选择器创建的伪元素设置hover选择器中的样式，设置元素透明度和缩放比例设置为1，使其能够正常显示出来
.play-button:hover::after{
opacity: 1;
transform: scale(1);
}总结
至此，这个平滑过渡动效就讲完了。怎么样？在页面中，当你用鼠标滑过播放按钮时，是不是可以看到里面的三角形平滑的变成了暂停按钮，然后又平滑的变回了播放按钮了呢？如果能看到这个效果，那么恭喜你，一不小心，你又掌握了一个“不得了”的技能，赶快跟你的小伙伴们去分享吧，够你得瑟一阵子的了。O(∩_∩)O哈哈~
如果喜欢小凡的这篇文章，记得点赞、收藏和分享哦！也欢迎大家在评论区留言。
相关文章推荐：
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
