View transition api and solid start
Has anybody gotten view transition api working reliably with solid router? I tried following code but it doesnt work always for some reason.
const VtApi: ParentComponent = (props) => {
const transition = (fnStartingTheSynchronousTransition) => {
// In case the API is not yet supported
if (!document.startViewTransition) {
return fnStartingTheSynchronousTransition();
}
// Transition the changes in the DOM
const transition = document.startViewTransition(
fnStartingTheSynchronousTransition,
);
};
useBeforeLeave((e) => {
// Stop the inmediate navigation and DOM change
if (!e.defaultPrevented) {
e.preventDefault();
// Perform the action that triggers a DOM change synchronously
transition(() => {
e.retry(true);
});
}
});
return <>{props.children}</>;
};
export default VtApi;const VtApi: ParentComponent = (props) => {
const transition = (fnStartingTheSynchronousTransition) => {
// In case the API is not yet supported
if (!document.startViewTransition) {
return fnStartingTheSynchronousTransition();
}
// Transition the changes in the DOM
const transition = document.startViewTransition(
fnStartingTheSynchronousTransition,
);
};
useBeforeLeave((e) => {
// Stop the inmediate navigation and DOM change
if (!e.defaultPrevented) {
e.preventDefault();
// Perform the action that triggers a DOM change synchronously
transition(() => {
e.retry(true);
});
}
});
return <>{props.children}</>;
};
export default VtApi;
