仿苹果官网底部动效导航按钮，动画核心使用css编写，已封装vue3组件版

苹果官网的动效挺多的，而且都很优雅，今天看到苹果底部的这个动效导航按钮感觉挺有意思，所以仿写了一个，做成了vue3的一个组件，源码地址：https://github.com/LovelyIliya/useless-ui。
先拆解一下动画：
显示步骤为：放大显示出圆圈，收缩蓝色边框，显示加号按钮后展开，显示文字
隐藏步骤为：先通过缩小隐藏加号按钮，隐藏文字，按钮由长变短为圆圈，然后缩小至消失

苹果官方示例：

我实现的效果：

然后根据以上步骤编写代码：

dom结构很简单，按钮盒子+两个子元素：文字、加号按钮

<template>
  <button
    class="magic-nav-btn"
    ref="container"
    @click="handleClick"
    :class="{
      playing: playing && !showed,
      normalcy: showed &&