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>

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>