study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-08 14:34:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

调节卡片动画

Browse Source
This commit is contained in:
fofolee 2024-12-17 12:11:08 +08:00
parent 41282f5c06
commit aa6217021f
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/CommandCard.vue
View File

@ -21,9 +21,9 @@
</div> </div>
<!-- 选项按钮 --> <!-- 选项按钮 -->
<div <div
class="absolute" class="absolute control-buttons"
style="z-index: 1; right: 16px; top: 16px" style="z-index: 1; right: 16px; top: 16px"
v-show="isWarpperHover" :class="{ 'buttons-visible': isWarpperHover }"
> >
<q-btn <q-btn
flat flat
@ -360,7 +360,7 @@ export default {
}, },
// 命令卡片点击事件 // 命令卡片点击事件
handleCardClick() { handleCardClick() {
// 视图模式下直接运行命令 // 视图模式直接运行命令
if (this.cardStyle.code === 1) return this.runCommand(); if (this.cardStyle.code === 1) return this.runCommand();
this.editCommand(); this.editCommand();
}, },
@ -465,17 +465,29 @@ export default {
text-align: right; text-align: right;
} }
.wrapper { .wrapper {
transition: 0.5s; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
} }
.warpperHover { .warpperHover {
transition: 0.5s; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(-3px); transform: translateY(-3px);
} }
.featureIco { .featureIco {
transition: 0.5s; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
} }
.featureIcoHover { .featureIcoHover {
transition: 0.5s; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1.1); transform: scale(1.1);
} }
.control-buttons {
opacity: 0;
transform: translateY(5px);
visibility: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.control-buttons.buttons-visible {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
</style> </style>