vue3封裝一個帶動畫的關(guān)閉按鈕示例詳解
預(yù)覽效果
實現(xiàn)源碼
<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寫法,自行實現(xiàn)。 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>
源碼說明
帶有變量的樣式,都寫在行內(nèi)了,因為這樣適合用在任意場景下。
// 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標(biāo)簽中使用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封裝一個帶動畫的關(guān)閉按鈕示例詳解的詳細內(nèi)容,更多關(guān)于vue3封裝動畫關(guān)閉按鈕的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
element-plus+Vue3實現(xiàn)表格數(shù)據(jù)動態(tài)渲染
在Vue中,el-table是element-ui提供的強大表格組件,可以用于展示靜態(tài)和動態(tài)表格數(shù)據(jù),本文主要介紹了element-plus+Vue3實現(xiàn)表格數(shù)據(jù)動態(tài)渲染,感興趣的可以了解一下2024-03-03vue中使用v-if,v-else來設(shè)置css樣式的步驟
我們在使用vue項目開發(fā)時,v-if是使用的非常多的,在這里我們談?wù)勅绾问褂胿-i來綁定修改css樣式,使用的主要是雙向數(shù)據(jù)綁定,即通過改變他的狀態(tài)來改變他的樣式,這篇文章主要介紹了vue中如何使用v-if,v-else來設(shè)置css樣式,需要的朋友可以參考下2023-03-03Vue源碼學(xué)習(xí)之響應(yīng)式是如何實現(xiàn)的
最近接觸了vue.js,一度非常好奇vue.js是如何監(jiān)測數(shù)據(jù)更新并且重新渲染頁面,這篇文章主要給大家介紹了關(guān)于Vue源碼學(xué)習(xí)之響應(yīng)式是如何實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-10-10VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸
本篇文章主要介紹了詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06