github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-02 02:48:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化滑动返回动画效果

Browse Source
This commit is contained in:
Pang 2024-01-08 00:25:37 +08:00
parent 7714c53085
commit b3bd5aded5
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/assets/js/components/Mobile/Back.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="mobile-back"> <div class="mobile-back">
<div v-if="isVisible" class="back-semicircle" :style="style"></div> <div v-if="isVisible && x > 20" class="back-semicircle" :style="style"></div>
</div> </div>
</template> </template>
@ -54,7 +54,6 @@ export default {
maxTop = this.windowHeight - offset; maxTop = this.windowHeight - offset;
return { return {
top: Math.min(top, maxTop) + 'px', top: Math.min(top, maxTop) + 'px',
left: this.x > 20 ? 0 : '-50px',
} }
}, },

13
resources/assets/sass/components/mobile.scss vendored
View File

@ -98,11 +98,16 @@
z-index: 9999; z-index: 9999;
border-radius: 50%; border-radius: 50%;
transform: translate(-460px, -50%); transform: translate(-460px, -50%);
transition: left 0.2s; animation: mobile-back-animation 200ms forwards;
}
}
&.show-back { @keyframes mobile-back-animation {
left: 0; from {
} left: -50px;
}
to {
left: 0;
} }
} }