github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-27 21:28:12 +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>
<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>
</template>
@ -54,7 +54,6 @@ export default {
maxTop = this.windowHeight - offset;
return {
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;
border-radius: 50%;
transform: translate(-460px, -50%);
transition: left 0.2s;
animation: mobile-back-animation 200ms forwards;
}
}
&.show-back {
left: 0;
}
@keyframes mobile-back-animation {
from {
left: -50px;
}
to {
left: 0;
}
}