magic-amber

Enable viewTransition on router.history.back()

Hi folks, I am using the defaultViewTransitions=false on my createTanStackRouter, as i want to be able to enable view transition for specific transitions only. At a case, i am using it on a <Link>, but also need to use on the way back (router.history.back()). Why router.history.back() ? Because its a gallery and i want to restore scroll position on where the user was on the page before navigate to the item page. This brings me to this question: is it possible to enable viewTransition on router.history.back as we do for Link components?

4 Replies

xenial-black•2mo ago

should work already https://github.com/TanStack/router/issues/2983 if it does not, can you please create a minimal reproducer and open a github issue? or maybe i misready your question still can you share a reproducer for better understanding?

magic-amberOP•2mo ago

@Manuel Schiller no problem, i can create a reproduction. But i think the question is really simple. I will be more concize. I want to enable view transitions api for specific routes only. I can enable this in a <Link viewTransitions/> Right? How to use it in a route.history method, without enabling it for the whole application? @Manuel Schiller So to illustrate:

    const handleClickTransitionDoesntWork = () => {
        document.startViewTransition(() => {
            if (canGoBack) {
                router.history.back()
            }
        })
    }

    const handleClickTransitionWorks = () => {
        document.startViewTransition(() => {
            router.navigate({ to: "/" }) // I know i can use viewTransition prop here, just for illustration purpose.
        })
    }

    const handleClickTransitionDoesntWork = () => {
        document.startViewTransition(() => {
            if (canGoBack) {
                router.history.back()
            }
        })
    }

    const handleClickTransitionWorks = () => {
        document.startViewTransition(() => {
            router.navigate({ to: "/" }) // I know i can use viewTransition prop here, just for illustration purpose.
        })
    }

Why exactly on the first, transition doesnt work but on the second it does?

xenial-black•2mo ago

i think you can set router.shouldViewTransition before back() ?

magic-amberOP•2mo ago

Right, that saved my day! Thanks so much @Manuel Schiller

Gaming

Programming

Enable viewTransition on router.history.back()

Did you find this page helpful?