Replies: 5 comments 3 replies
-
|
This would be a very useful feature that I directly missed after trying View Transitions. 👍 |
Beta Was this translation helpful? Give feedback.
-
|
We'll definitely do something like this |
Beta Was this translation helpful? Give feedback.
-
|
I will look into this |
Beta Was this translation helpful? Give feedback.
-
|
I will update this section to reflect the current discussions. The current plan for the API is like this: to some extent similar to https://developer.mozilla.org/en-US/docs/Web/API/Navigation/navigate. The API does not provide special functions for forward & backward navigation.
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for implementing this feature 👍 (withastro/astro#8571) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for this. I might create a full on stack view manager for a mobile experience (app dev) This is something for those who just need a quick dirty import { navigate } from 'astro:transitions/client';
import type { Options } from 'astro/transitions/router';
import { action, atom } from 'nanostores';
const $previousView = atom<string | null>(null);
export const setPreviousView = action(
$previousView,
'setPreviewView',
(state, view: string | null) => {
state.set(view);
},
);
export const skNavigateBack = (skipFallback?: boolean) => {
const previousView = $previousView.get();
if (previousView) {
navigate(previousView, { history: 'replace' });
} else if (!skipFallback) {
navigate('/app', { history: 'replace' });
}
};
export const skNavigate = (href: string, options?: Options) => {
setPreviousView(window.location.pathname);
navigate(href, options);
}; |
Beta Was this translation helpful? Give feedback.
-
|
It's worth noting that view transitions are compatible with browser history. Users can use the browser On the API side, you can combine |
Beta Was this translation helpful? Give feedback.
-
|
This feature was released! If there are bugs please file them in the main repo. If they are no add-ons to this feature, please open a new proposal. Thank you! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Body
Summary
Provide programmatic API for navigation to trigger view transition animation.
Background & Motivation
Now, only clicking the
atag on the page will trigger the view transition. But if I use something likewindow.open(...)in the JavaScript logic, it still refresh the full page.Example
Something like the following code snippet. Invoke the
navigatefunction will navigate to the corresponding URL and view transition animation also display as usual.Beta Was this translation helpful? Give feedback.
All reactions