RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(swipe): animation delay 

Signed-off-by: Varun Patil <radialapps@gmail.com>
pull/653/merge
Varun Patil 2023-11-01 15:03:18 -07:00
parent 133d167f1a
commit 9e7b3a32f6
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/SwipeRefresh.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div @touchstart.passive="touchstart" @touchmove.passive="touchmove" @touchend.passive="touchend"> <div @touchstart.passive="touchstart" @touchmove.passive="touchmove" @touchend.passive="touchend">
<div v-show="show" class="swipe-progress" :style="{ background: gradient }" :class="{ animate }"></div> <div v-show="show" class="swipe-progress" :style="{ background: gradient }" :class="{ animate, wasSwiped }"></div>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@ -36,6 +36,7 @@ export default defineComponent({
updateFrame: 0, updateFrame: 0,
progress: 0, progress: 0,
animate: false, animate: false,
wasSwiped: true,
firstcycle: 0, firstcycle: 0,
}), }),
@ -45,9 +46,19 @@ export default defineComponent({
watch: { watch: {
loading() { loading() {
this.wasSwiped = this.progress >= 100;
if (!this.wasSwiped) {
// The loading animation was triggered from elsewhere
// let it continue normally
this.animate = this.loading;
return;
}
// Let the animation run for at least half cycle
// if the user pulled down, so we provide good feedback
// that something actually happened
if (this.loading) { if (this.loading) {
if (!this.animate) { if (!this.animate) {
// Let the animation run for at least half cycle
this.firstcycle = window.setTimeout(() => { this.firstcycle = window.setTimeout(() => {
this.firstcycle = 0; this.firstcycle = 0;
this.animate = this.loading; this.animate = this.loading;
@ -56,7 +67,6 @@ export default defineComponent({
this.animate = this.loading; this.animate = this.loading;
} else { } else {
if (!this.firstcycle) { if (!this.firstcycle) {
console.log('stop');
this.animate = this.loading; this.animate = this.loading;
} }
} }
@ -108,8 +118,8 @@ export default defineComponent({
// Execute action on threshold // Execute action on threshold
if (this.progress >= 100) { if (this.progress >= 100) {
this.on = false;
this.$emit('refresh'); this.$emit('refresh');
this.on = false;
} }
}); });
}, },
@ -136,6 +146,7 @@ export default defineComponent({
} }
&.animate { &.animate {
background-position: center;
$progress-inside: radial-gradient( $progress-inside: radial-gradient(
circle at center, circle at center,
transparent 0%, transparent 0%,
@ -152,23 +163,25 @@ export default defineComponent({
); );
animation: swipe-loading 1.5s ease infinite; animation: swipe-loading 1.5s ease infinite;
background-position: center; &.wasSwiped {
animation-delay: -0.75s;
}
@keyframes swipe-loading { @keyframes swipe-loading {
0% { 0% {
background-image: $progress-inside; background-image: $progress-outside;
background-size: 100% 100%; background-size: 100% 100%;
} }
49.99% { 49.99% {
background-image: $progress-inside; background-image: $progress-outside;
background-size: 12000% 12000%; background-size: 12000% 12000%;
} }
50% { 50% {
background-image: $progress-outside; background-image: $progress-inside;
background-size: 100% 100%; background-size: 100% 100%;
} }
100% { 100% {
background-image: $progress-outside; background-image: $progress-inside;
background-size: 12000% 12000%; background-size: 12000% 12000%;
} }
} }

2
src/components/Timeline.vue
View File

@ -369,7 +369,7 @@ export default defineComponent({
* Debouncing is necessary due to a large number of calls, e.g. * Debouncing is necessary due to a large number of calls, e.g.
* when changing the configuration * when changing the configuration
*/ */
async softRefresh() { softRefresh() {
this.softRefreshInternal(false); this.softRefreshInternal(false);
}, },