study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-30 04:42:45 +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
class="absolute"
class="absolute control-buttons"
style="z-index: 1; right: 16px; top: 16px"
v-show="isWarpperHover"
:class="{ 'buttons-visible': isWarpperHover }"
>
<q-btn
flat
@ -360,7 +360,7 @@ export default {
},
// 命令卡片点击事件
handleCardClick() {
// 视图模式下直接运行命令
// 视图模式直接运行命令
if (this.cardStyle.code === 1) return this.runCommand();
this.editCommand();
},
@ -465,17 +465,29 @@ export default {
text-align: right;
}
.wrapper {
transition: 0.5s;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.warpperHover {
transition: 0.5s;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(-3px);
}
.featureIco {
transition: 0.5s;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.featureIcoHover {
transition: 0.5s;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 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>