vue3封装一个带动画的关闭按钮示例详解
作者：jsoncode
这篇文章主要为大家介绍了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>以上就是vue3封装一个带动画的关闭按钮示例详解的详细内容，更多关于vue3封装动画关闭按钮的资料请关注脚本之家其它相关文章！