sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-06 11:25:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make closed sessions animate

Browse source
This commit is contained in:
Peter Steinberger 2025-06-25 01:40:11 +02:00
parent d5f6919f9c
commit b3299e020a
2 changed files with 72 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
web/src/client/app.ts
View file

@ -382,29 +382,56 @@ export class VibeTunnelApp extends LitElement {
}
private async handleHideExitedChange(e: CustomEvent) {
const performChange = () => {
this.hideExited = e.detail;
this.saveHideExitedState(this.hideExited);
// Add animation class to session-list for CSS animations
requestAnimationFrame(() => {
const sessionList = this.renderRoot.querySelector('session-list');
if (sessionList) {
sessionList.classList.add('sessions-transitioning');
// Remove the class after animation completes
setTimeout(() => {
sessionList.classList.remove('sessions-transitioning');
}, 600); // Slightly longer than animation duration
}
});
};
console.log('handleHideExitedChange', {
currentHideExited: this.hideExited,
newHideExited: e.detail,
hasViewTransitions: 'startViewTransition' in document,
});
// Use View Transitions API if available
if ('startViewTransition' in document && typeof document.startViewTransition === 'function') {
await document.startViewTransition(performChange);
console.log('Using View Transitions API');
await document.startViewTransition(() => {
this.hideExited = e.detail;
this.saveHideExitedState(this.hideExited);
});
} else {
performChange();
console.log('Using CSS animations fallback');
// For browsers without View Transitions, add a class before the change
const wasHidingExited = this.hideExited;
// Add pre-animation class
document.body.classList.add('sessions-animating');
console.log('Added sessions-animating class');
// Update state
this.hideExited = e.detail;
this.saveHideExitedState(this.hideExited);
// Wait for render and trigger animations
await this.updateComplete;
console.log('Update complete, scheduling animation');
requestAnimationFrame(() => {
// Add specific animation direction
const animationClass = wasHidingExited ? 'sessions-showing' : 'sessions-hiding';
document.body.classList.add(animationClass);
console.log('Added animation class:', animationClass);
// Check what elements will be animated
const cards = document.querySelectorAll('.session-flex-responsive > session-card');
console.log('Found session cards to animate:', cards.length);
// Clean up after animation
setTimeout(() => {
document.body.classList.remove(
'sessions-animating',
'sessions-showing',
'sessions-hiding'
);
console.log('Cleaned up animation classes');
}, 600);
});
}
}

47
web/src/client/styles.css
View file

@ -323,30 +323,35 @@ body {
}
/* Session grid flow animations */
.sessions-transitioning .session-flex-responsive > *,
.sessions-transitioning .space-y-2 > * {
body.sessions-showing .session-flex-responsive > session-card {
animation: sessionFlow 0.4s ease-out backwards;
}
/* Stagger animation for each card */
.sessions-transitioning .session-flex-responsive > *:nth-child(1),
.sessions-transitioning .space-y-2 > *:nth-child(1) { animation-delay: 0s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(2),
.sessions-transitioning .space-y-2 > *:nth-child(2) { animation-delay: 0.05s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(3),
.sessions-transitioning .space-y-2 > *:nth-child(3) { animation-delay: 0.1s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(4),
.sessions-transitioning .space-y-2 > *:nth-child(4) { animation-delay: 0.15s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(5),
.sessions-transitioning .space-y-2 > *:nth-child(5) { animation-delay: 0.2s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(6),
.sessions-transitioning .space-y-2 > *:nth-child(6) { animation-delay: 0.25s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(7),
.sessions-transitioning .space-y-2 > *:nth-child(7) { animation-delay: 0.3s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(8),
.sessions-transitioning .space-y-2 > *:nth-child(8) { animation-delay: 0.35s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(n+9),
.sessions-transitioning .space-y-2 > *:nth-child(n+9) { animation-delay: 0.4s; }
/* Stagger animation when showing exited sessions */
body.sessions-showing .session-flex-responsive > session-card:nth-child(1) { animation-delay: 0s; }
body.sessions-showing .session-flex-responsive > session-card:nth-child(2) { animation-delay: 0.05s; }
body.sessions-showing .session-flex-responsive > session-card:nth-child(3) { animation-delay: 0.1s; }
body.sessions-showing .session-flex-responsive > session-card:nth-child(4) { animation-delay: 0.15s; }
body.sessions-showing .session-flex-responsive > session-card:nth-child(5) { animation-delay: 0.2s; }
body.sessions-showing .session-flex-responsive > session-card:nth-child(6) { animation-delay: 0.25s; }
body.sessions-showing .session-flex-responsive > session-card:nth-child(7) { animation-delay: 0.3s; }
body.sessions-showing .session-flex-responsive > session-card:nth-child(8) { animation-delay: 0.35s; }
body.sessions-showing .session-flex-responsive > session-card:nth-child(n+9) { animation-delay: 0.4s; }
/* Compact mode animations */
body.sessions-showing .space-y-2 > div {
animation: sessionFlow 0.4s ease-out backwards;
}
body.sessions-showing .space-y-2 > div:nth-child(1) { animation-delay: 0s; }
body.sessions-showing .space-y-2 > div:nth-child(2) { animation-delay: 0.05s; }
body.sessions-showing .space-y-2 > div:nth-child(3) { animation-delay: 0.1s; }
body.sessions-showing .space-y-2 > div:nth-child(4) { animation-delay: 0.15s; }
body.sessions-showing .space-y-2 > div:nth-child(5) { animation-delay: 0.2s; }
body.sessions-showing .space-y-2 > div:nth-child(6) { animation-delay: 0.25s; }
body.sessions-showing .space-y-2 > div:nth-child(7) { animation-delay: 0.3s; }
body.sessions-showing .space-y-2 > div:nth-child(8) { animation-delay: 0.35s; }
body.sessions-showing .space-y-2 > div:nth-child(n+9) { animation-delay: 0.4s; }
@keyframes sessionFlow {
from {