调节卡片动画

This commit is contained in:
fofolee 2024-12-17 12:11:08 +08:00
parent 41282f5c06
commit aa6217021f

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>