Skip to content

Improve animation when switching images#3354

Merged
ildyria merged 4 commits intomasterfrom
improved-animation-next-previous
May 25, 2025
Merged

Improve animation when switching images#3354
ildyria merged 4 commits intomasterfrom
improved-animation-next-previous

Conversation

@ildyria
Copy link
Copy Markdown
Member

@ildyria ildyria commented May 17, 2025

Add visual feedback that we are going to the previous or next photos.
As we now have a nice transition, the shutter is no longer necessary.

Documentation on the transition component: https://vuejs.org/guide/built-ins/transition

This pull request introduces a new photo transition animation feature for the gallery photo viewer, enhancing the user experience with smooth sliding effects. It includes changes to support customizable transitions between photos and updates to the components and composables for managing these transitions.

Transition Animation Feature:

  • Added support for customizable photo transition animations (slide-next and slide-previous) in the PhotoPanel component. This includes adding a transition prop, a Transition wrapper, and corresponding CSS styles for smooth sliding effects. ([[1]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-97c3c69aa176ee33f02063b98b9fb29ecb07e27c76d3b8b058dca16bcc4ed327L2-R10), [[2]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-97c3c69aa176ee33f02063b98b9fb29ecb07e27c76d3b8b058dca16bcc4ed327R100-R101), [[3]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-97c3c69aa176ee33f02063b98b9fb29ecb07e27c76d3b8b058dca16bcc4ed327R149), [[4]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-97c3c69aa176ee33f02063b98b9fb29ecb07e27c76d3b8b058dca16bcc4ed327R165), [[5]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-97c3c69aa176ee33f02063b98b9fb29ecb07e27c76d3b8b058dca16bcc4ed327R238-R279))

Updates to Composables:

  • Updated useAlbumRefresher to include a transition reactive variable and a setTransition method to determine the direction of the slide based on the next or previous photo. ([[1]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-24ffd824e902635c5157c492b21f48a1031a3385c37e3fa44a7af8b5d91d0865R16), [[2]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-24ffd824e902635c5157c492b21f48a1031a3385c37e3fa44a7af8b5d91d0865R76-R87), [[3]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-24ffd824e902635c5157c492b21f48a1031a3385c37e3fa44a7af8b5d91d0865R98-R105))

Integration with Views:

  • Modified the Album.vue and Search.vue views to pass the transition prop to the PhotoPanel component and use the setTransition method when navigating between photos. ([[1]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-88a848123a6b43d2f9695bb217b0d435421b52774f19ea9cc79388f46de23c3cR38), [[2]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-88a848123a6b43d2f9695bb217b0d435421b52774f19ea9cc79388f46de23c3cL218-R219), [[3]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-88a848123a6b43d2f9695bb217b0d435421b52774f19ea9cc79388f46de23c3cR428-R429), [[4]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-e5023252e2c9afc91608da26a88b70b3e5dc53aba16bd66087a86d3e52e409a9R53), [[5]](https://github.com/LycheeOrg/Lychee/pull/3354/files#diff-e5023252e2c9afc91608da26a88b70b3e5dc53aba16bd66087a86d3e52e409a9R451-R452))

@ildyria ildyria requested a review from a team as a code owner May 17, 2025 10:58
@ildyria ildyria added the Review: easy Easy review expected: probably just need a quick to go through. label May 17, 2025
@codecov
Copy link
Copy Markdown

codecov Bot commented May 17, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.99%. Comparing base (19ee56e) to head (a2bff5a).
Report is 1 commits behind head on master.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ildyria ildyria added the alpha-ready Branch is available in alpha label May 21, 2025
@ildyria ildyria merged commit 8698318 into master May 25, 2025
35 checks passed
@ildyria ildyria deleted the improved-animation-next-previous branch May 25, 2025 09:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

alpha-ready Branch is available in alpha Review: easy Easy review expected: probably just need a quick to go through.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants