vue3封装一个带动画的关闭按钮

预览效果：

实现源码：

<template>
  <MenuBtn
      :open="openMenu"
      :size="24"
  />
</template>

<template>
  <div :class="`menu ${open?'open':''}`" :style="`width:${size}px;height:${size}px`">
    <span
        :style="`
          transition-duration:${duration}ms;
          transform:${open?`translateY(${(size-2)/2}px) rotate(-45deg)`:`translateY(${size/6}px)`};
        `"
    />
    <span
        :style="`
          transition-duration:${duration}ms;
          ${open?`opacity: 0;transform: rotate(-45deg)`:''}
        `"
    />
    <span
        :style="`
          transition-duration:${duration}ms;
          transform:${open?`translateY(${-(size-2)/2}px) rotate(45deg)`:`translateY(-${size/6}px)`};
        `"
    />
  </div>
</template>
<script setup>
// 这里用了vue3的专用写法。vue2写法，自行实现。
const {open, size, duration} = defineProps({
  open: {
    type: Boolean,
    default: false,
    required: true,
  },
  size: {
    type: Number,
    default: 24,
    required: false
  },
  duration: {
    type: Number,
    default: 300,
    required: false
  }
});
</script>
<style scoped lang="scss">
.menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;

  span {
    height: 2px;
    border-radius: 2px;
    display: flex;
    width: 100%;
    background-color: #333;
  }
}
</style>

源码说明：
带有变量的样式，都写在行内了，因为这样适合用在任意场景下。

// nuxt3 
npx nuxi init <project-name>

// nuxt2
yarn create nuxt-app <project-name>

// vue-cli
vue create <project-name>

// vite
npm init vite-app <project-name>

其他场景：
vite可以直接在style标签中使用js变量

npm init vite-app <project-name>

<template>
  <h1>{color}</h1>
</template>

<script>
export default {
  data () {
    return {
      color: 'red'
    }
  }
}
</script>

<style vars="{ color }" scoped>
h1 {
  color: var(--color);
}
</style>