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

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

苹果官方示例：

我实现的效果：

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

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

<template>
  <button class="magic-nav-btn" ref="container" @click="handleClick">
    <span class="text">{{ props.text }}</span>
    <div class="icon-btn">
      <span class="iconfont icon-jia"></span>
    </div>
  </button>
</template>

js部分
可以接收外部传递进来的文字，因为文字长度不定，所以变宽效果无法使用css实现，这里用js实现变宽效果，延迟时间和下方css动画anim-adjust的延迟时间相对应
导出播放play和隐藏hide事件供外部调用
播放和隐藏逻辑就是添加对应的class类名

import { ref } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: ''
  }
})

const container = ref()
const playing = ref(false)
const showed = ref(false)
function play() {
  if (playing.value || showed.value) return
  playing.value = true
  container.value.classList.add('play')
  container.value.classList.remove('normalcy')
  setTimeout(() => {
    container.value.style.width = 100 + props.text?.length * 10 + 'px'
  }, 700)
  setTimeout(() => {
    container.value.classList.add('normalcy')
    container.value.classList.remove('play')
    playing.value = false
    showed.value = true
  }, 1000)
}

function hide() {
  if (playing.value || !showed.value) return
  playing.value = true
  container.value.classList.add('hide')
  container.value.classList.remove('normalcy')
  setTimeout(() => {
    container.value.style.width = '55px'
  }, 300)
  setTimeout(() => {
    container.value.classList.remove('hide')
    playing.value = false
    showed.value = false
  }, 1000)
}

const emit = defineEmits(['click'])
function handleClick(e: Event) {
  emit('click', e)
}

defineExpose({ play, hide })

css部分
3个动画：anim-show缩放动画 anim-border边框动画 anim-adjust微调动画
3个状态类：normalcy正常显示的常态 playing播放中状态 hideing隐藏中状态

.magic-nav-btn {
  border: 0 solid #0c77e4;
  backdrop-filter: blur(4px);
  background-color: rgba($color: #fff, $alpha: 0.7);
  scale: 0;
  border-radius: 30px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  transition: width 0.3s ease-in-out;
  // 常态样式
  &.normalcy {
    height: 55px;
    justify-content: space-between;
    scale: 1;
    .text {
      width: calc(100% - 50px);
      opacity: 1;
    }
    .icon-btn {
      margin-right: 10px;
      scale: 1;
    }
  }
  &.playing {
    height: 55px;
    width: 55px;
    border-width: 15px;
    border-radius: 50%;
    justify-content: center;
    animation:
      anim-show 0.5s ease-in-out forwards,
      anim-border 0.15s ease-in-out forwards 0.55s,
      anim-adjust 0.3s ease-in-out forwards 0.7s;
    .icon-btn {
      animation: anim-show 0.5s ease-in-out forwards 0.45s;
    }
  }
  &.hideing {
    height: 55px;
    scale: 1;
    padding-right: 0;
    animation:
      anim-adjust 0.2s ease-in-out forwards reverse 0.3s,
      anim-show 0.2s ease-in-out forwards 0.65s reverse;
    .text {
      width: calc(100% - 50px);
      opacity: 0;
    }
    .icon-btn {
      animation: anim-show 0.2s ease-in-out forwards reverse;
    }
  }
  .text {
    color: #1d1d1f;
    letter-spacing: 1px;
    opacity: 0;
    width: 0;
    text-align: center;
    transition: opacity 0.2s ease-in;
  }
  .icon-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    scale: 0;
    border-radius: 50%;
    background-color: #0c77e4;
    color: #fff;
    text-align: center;
    transform-origin: center;
    .iconfont {
      font-size: 32px;
    }
  }
}

@keyframes anim-show {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

@keyframes anim-border {
  from {
    border-radius: 50%;
    border-width: 15px;
  }
  to {
    border-radius: 30px;
    border-width: 0;
  }
}

@keyframes anim-adjust {
  0% {
    border-radius: 30px;
    justify-content: center;
    padding-right: 0;
  }
  10% {
    justify-content: space-between;
  }
  100% {
    padding-right: 10px;
    justify-content: space-between;
  }
}

实际效果看起来和苹果官方的对比还是有差异的，如果用gsap这种js动画插件的话应该能实现更好的效果
此组件已收录至我的组件库：
https://github.com/LovelyIliya/useless-ui