sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +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) { private async handleHideExitedChange(e: CustomEvent) {
const performChange = () => { console.log('handleHideExitedChange', {
this.hideExited = e.detail; currentHideExited: this.hideExited,
this.saveHideExitedState(this.hideExited); newHideExited: e.detail,
hasViewTransitions: 'startViewTransition' in document,
// 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
}
});
};
// Use View Transitions API if available // Use View Transitions API if available
if ('startViewTransition' in document && typeof document.startViewTransition === 'function') { 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 { } 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 */ /* Session grid flow animations */
.sessions-transitioning .session-flex-responsive > *, body.sessions-showing .session-flex-responsive > session-card {
.sessions-transitioning .space-y-2 > * {
animation: sessionFlow 0.4s ease-out backwards; animation: sessionFlow 0.4s ease-out backwards;
} }
/* Stagger animation for each card */ /* Stagger animation when showing exited sessions */
.sessions-transitioning .session-flex-responsive > *:nth-child(1), body.sessions-showing .session-flex-responsive > session-card:nth-child(1) { animation-delay: 0s; }
.sessions-transitioning .space-y-2 > *:nth-child(1) { animation-delay: 0s; } body.sessions-showing .session-flex-responsive > session-card:nth-child(2) { animation-delay: 0.05s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(2), body.sessions-showing .session-flex-responsive > session-card:nth-child(3) { animation-delay: 0.1s; }
.sessions-transitioning .space-y-2 > *:nth-child(2) { animation-delay: 0.05s; } body.sessions-showing .session-flex-responsive > session-card:nth-child(4) { animation-delay: 0.15s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(3), body.sessions-showing .session-flex-responsive > session-card:nth-child(5) { animation-delay: 0.2s; }
.sessions-transitioning .space-y-2 > *:nth-child(3) { animation-delay: 0.1s; } body.sessions-showing .session-flex-responsive > session-card:nth-child(6) { animation-delay: 0.25s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(4), body.sessions-showing .session-flex-responsive > session-card:nth-child(7) { animation-delay: 0.3s; }
.sessions-transitioning .space-y-2 > *:nth-child(4) { animation-delay: 0.15s; } body.sessions-showing .session-flex-responsive > session-card:nth-child(8) { animation-delay: 0.35s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(5), body.sessions-showing .session-flex-responsive > session-card:nth-child(n+9) { animation-delay: 0.4s; }
.sessions-transitioning .space-y-2 > *:nth-child(5) { animation-delay: 0.2s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(6), /* Compact mode animations */
.sessions-transitioning .space-y-2 > *:nth-child(6) { animation-delay: 0.25s; } body.sessions-showing .space-y-2 > div {
.sessions-transitioning .session-flex-responsive > *:nth-child(7), animation: sessionFlow 0.4s ease-out backwards;
.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; } body.sessions-showing .space-y-2 > div:nth-child(1) { animation-delay: 0s; }
.sessions-transitioning .session-flex-responsive > *:nth-child(n+9), body.sessions-showing .space-y-2 > div:nth-child(2) { animation-delay: 0.05s; }
.sessions-transitioning .space-y-2 > *:nth-child(n+9) { animation-delay: 0.4s; } 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 { @keyframes sessionFlow {
from { from {