CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单

2022-12-18 885

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单

前言

在前面的两节【CSS 进阶向】中，我们通过纯粹的 CSS 结合 HTML 元素实现了两种不同的“流光边框”效果的按钮。两者都是通过元素（或者伪元素）配合 CSS 动画属性 animation 与自定义动画帧 @keyframes 来实现的。

这次我们通过 Vue 的动态样式和计算属性，来实现一个点击展开的圆环菜单，并且实现菜单图标的顺序显示。

先上最终效果和代码：

Markup：

<div id="app">
  <circle-menu-button />
</div>

Style：

body,
#app  {
  width: 100vw;
  height: 100vh;
}
.circle-menu-button {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to left, #2bc0e4, #eaecc6);
}
.menu {
  position: relative;
}
.menu-dots {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 0.3rem #161e3f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
  transition: 0.3s;
  cursor: pointer;
}
.menu-dots:hover {
  box-shadow: 0 0 0 0.3rem #161e3f, 0 0 0 1rem rgba(#161e3f, 0.16);
  transform: scale(1.2) rotate(90deg);
}
.menu-dot {
  width: 0.45rem;
  height: 0.45rem;
  background-color: #161e3f;
  border-radius: 50%;
}
.menu-dot + .menu-dot {
  margin-top: 0.3rem;
}
.menu.active > .menu-dots {
  transform: none;
  box-shadow: 0 0 0 3.4rem #161e3f;
}
.menu-items,
.menu-item {
  position: absolute;
  top: -3.4rem;
  left: -3.4rem;
  right: -3.4rem;
  bottom: -3.4rem;
  transition: 0.3s;
  pointer-events: none;
}
.menu-items {
  opacity: 0;
  color: #ffffff;
}
.menu.active .menu-items {
  opacity: 1;
}
.menu-item {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem;
  font-size: 1.6rem;
  filter: blur(2px);
  opacity: 0;
  display: inline-block;
  text-align: center;
  i {
    pointer-events: auto;
    display: inline-block;
    cursor: pointer;
  }
  &:hover {
    color: #5c67ff;
  }
}
.menu.active .menu-items > .menu-item {
  opacity: 1;
  transform: none;
  filter: none;
}

Script：

<template>
  <div class="circle-menu-button">
    <nav :class="{ menu: true, active: isActive }">
      <label class="menu-dots" for="menu" @click="isActive = !isActive">
        <span class="menu-dot"></span>
        <span class="menu-dot"></span>
        <span class="menu-dot"></span>
      </label>
      <ul class="menu-items">
        <li v-for="(m, k) in menus" class="menu-item" :style="iconStyle(k)" :key="m.name">
          <i :class="m.icon" />
        </li>
      </ul>
    </nav>
  </div>
</template>
<script>
export default {
  name: "CircleMenuButton",
  data() {
    return {
      menus: [
        { icon: "el-icon-question", name: "1" },
        { icon: "el-icon-platform-eleme", name: "2" },
        { icon: "el-icon-camera-solid", name: "3" },
        { icon: "el-icon-info", name: "4" },
        { icon: "el-icon-s-shop", name: "5" },
        { icon: "el-icon-message-solid", name: "6" }
      ],
      isActive: false
    };
  },
  computed: {
    iconStyle() {
      const length = this.menus.length;
      const transitionStep = 0.5 / (this.menus.length - 1);
      return (i) => {
        return { transform: `rotate(${Math.floor((i * 360) / length)}deg)`, transitionDelay: `${transitionStep * i}s` };
      };
    }
  }
};
</script>

实现

在实现过程中，我们按照以下步骤：

整体结构和控制菜单展开/首起的按钮

控制按钮的 hover 状态

展开后的圆环

每个菜单的样式计算与动画配置

1. 整体结构与基础按钮

整个菜单内部包含两个部分：控制按钮和菜单列表，分别用一个 label 和 ul 填充。

label 内部使用三个 span 标签实现圆点；并用动态样式绑定一个展开状态的 class 类名。

<template>
  <div class="circle-menu-button">
    <div :class="{ menu: true, active: isActive }">
      <label class="menu-dots" for="menu" @click="isActive = !isActive">
        <span class="menu-dot"></span>
        <span class="menu-dot"></span>
        <span class="menu-dot"></span>
      </label>
      <ul class="menu-items">
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "CircleMenuButton",
  data() {
    return {
      isActive: false
    };
  }
};
</script>
<style scoped lang="scss">
.menu {
  position: relative;
}
.menu-dots {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 0.3rem #161e3f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
  transition: 0.3s;
  cursor: pointer;
}
.menu-dot {
  width: 0.45rem;
  height: 0.45rem;
  background-color: #161e3f;
  border-radius: 50%;
}
.menu-dot + .menu-dot {
  margin-top: 0.3rem;
}
</style>

此时得到如下的样式：

网络异常，图片无法展示

2. 添加按钮 hover 样式

为了让用户直观的感受到这个元素是一个可以点击的元素，我们可以增加一个 hover 状态的特殊样式，以提示用户。

.menu-dots:hover {
  box-shadow: 0 0 0 0.3rem #161e3f, 0 0 0 1rem rgba(#161e3f, 0.16);
  transform: scale(1.2) rotate(90deg);
}

此时会方法整个dom元素，并扩大外层阴影，提示用户点击：

网络异常，图片无法展示

3. 展开状态的菜单放置圆环

在用户点击后，可以旋转中心的 label 标签表示菜单已展开，并且在外层显示 ul 对应的菜单列表和圆环。

.menu.active > .menu-dots {
  transform: none;
  box-shadow: 0 0 0 3.4rem #161e3f;
}
.menu-items {
  position: absolute;
  top: -3.4rem;
  left: -3.4rem;
  right: -3.4rem;
  bottom: -3.4rem;
  transition: 0.3s;
  opacity: 0;
  pointer-events: none;
}

为了增加辨识度，这时会取消掉最外层的浅色 box-shadow 阴影。

ul 元素会通过绝对定位的形式，填满整个元素与 box-shadow 覆盖的区域。

需要禁用该元素的鼠标事件，避免无法点击到内部的 label 元素，造成无法收起菜单。并且设置 opacity 为 0，隐藏内部的菜单按钮部分

此时会得到这样一个效果：

网络异常，图片无法展示

乍一看，有点像个 iPod 播放器的按钮？

4. 每个菜单元素的样式计算

首先，我们先模拟一下菜单数据：

menus: [
  { icon: "el-icon-question", name: "1" },
  { icon: "el-icon-platform-eleme", name: "2" },
  { icon: "el-icon-camera-solid", name: "3" },
  { icon: "el-icon-info", name: "4" },
  { icon: "el-icon-s-shop", name: "5" },
  { icon: "el-icon-message-solid", name: "6" }
]

然后，在 template 中渲染对应的菜单项：

<ul class="menu-items">
  <li v-for="(m, k) in menus" class="menu-item" :style="iconStyle(k)" :key="m.name">
    <i :class="m.icon" />
  </li>
</ul>

随后是样式部分：

.menu.active .menu-items {
  opacity: 1;
}
.menu-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem;
  font-size: 1.6rem;
  filter: blur(2px);
  opacity: 0;
  display: inline-block;
  text-align: center;
  transition: 0.3s;
  pointer-events: none;
  i {
    pointer-events: auto;
    display: inline-block;
    cursor: pointer;
  }
  &:hover {
    color: #5c67ff;
  }
}
.menu.active .menu-items > .menu-item {
  opacity: 1;
  transform: none;
  filter: none;
}

这时得到这样的效果：

网络异常，图片无法展示

我们会发现所有的菜单图标都挤在一个位置，并且也无法看到顺序出现的动画。

这时就需要使用 Vue 的计算属性了。我们可以通过计算属性返回一个依赖 menus 菜单数组的函数，接收当前菜单元素下标并返回对应的样式。

export default {
  name: "CircleMenuButton",
  data() {
    return {
      menus: [
        { icon: "el-icon-question", name: "1" },
        { icon: "el-icon-platform-eleme", name: "2" },
        { icon: "el-icon-camera-solid", name: "3" },
        { icon: "el-icon-info", name: "4" },
        { icon: "el-icon-s-shop", name: "5" },
        { icon: "el-icon-message-solid", name: "6" }
      ],
      isActive: false
    };
  },
  computed: {
    iconStyle() {
      const length = this.menus.length;
      const transitionStep = 0.5 / (this.menus.length - 1);
      return (i) => {
        return { transform: `rotate(${Math.floor((i * 360) / length)}deg)`, transitionDelay: `${transitionStep * i}s` };
      };
    }
  }
};

该函数返回一个 transform 属性和一个 transitionDelay 属性。

为了保证形成一个完整的圆环，需要通过 menus 的长度计算每个菜单之间的旋转角度，使用 transform：rotate() 进行旋转；

transitionDelay 则是 transition 动画的延迟时间控制，为了避免菜单过多时导致动画时长太长，可以通过一个总的时间（这里是 0.5s）与菜单长度计算延迟时间单位，保证动画总时长不超过固定时长。

扩展

整个组件的数据都在内部，后续其实也可以通过 props 的形式控制菜单项与动画总时长等；颜色调整也可以使用变量的形式让其更加可控。

内部为了保证每个菜单项都在圆环上，采用了固定数值的定位配置；并且每个 menu-item 的大小都与整体区域大小一致，所以也需要取消他们的 dom 事件，在最内层的 i 标签上恢复事件响应，整个设计上来说个人感觉并不是很完美。也希望大家有好主意的话可以告诉我，后续再对其进行一些优化。

CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单

前言

实现

1. 整体结构与基础按钮

2. 添加按钮 hover 样式

3. 展开状态的菜单放置圆环

4. 每个菜单元素的样式计算

扩展

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单

前言

实现

1. 整体结构与基础按钮

2. 添加按钮 hover 样式

3. 展开状态的菜单放置圆环

4. 每个菜单元素的样式计算

扩展

热门文章

最新文章

相关课程

相关电子书

相关实验场景