transition:persist children

[tough oar]

Currently have a <Nav title='{title}' /> that has an animation and page title that changes on a new route.

For the animation to be carried over, the transition:persist needs to be applied. However, this persist applies to all children elements.

Is there a way to update the title but still keep the animation working through a navigation?

<Nav />:

---
interface Props {
  title: string;
}

const { title } = Astro.props;
---
<nav id="nav">
    <div id="navbar-left" transition:persist="navbar-left">
        <a href="#" onclick="window.history.back(); return false;">
            <Icon name="symbols/left-arrow" width={32} height={32} />
        </a>
        <h1 id="page-name">{title}</h1>
    </div>
</nav>

In each page, the layout has the title prop, which is based to this <Nav /> in the Layout.astro.

[barren cave]

Is there a way to update the title but still keep the animation working through a navigation?

Hi @tough oar, no, not out of the box.

if you want to persist the <nav> but want to swap the <h1> inside, you could "manually" copy over the title.

A simple approach would be to update the title right before the swap:

<script>
  document.addEventListener("astro:before-swap", (e) => {
    const oldTitle = document.querySelector("#page-name");
    const newTitle = e.newDocument.querySelector("#page-name");
    if (oldTitle && newTitle) oldTitle.replaceWith(newTitle);
  });
</script>

Is that what you were looking for?

[tough oar]

Yep! Wish there was a directive to exclude children elements but this does the trick!

[barren cave]

If there is broader demand for such an extension, I could offer a component in The Bag that generalizes this approach.

[royal tundra]

If your issue is resolved, please help by doing the following two steps:

1. From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
2. From the same ellipses, select Close Post.
   Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
   Thank you for your help!

[tough oar]

I would advocate for that!

[barren cave]

Yes, but you’re also a very advanced user 😉 The need for a general solution where replace and persist can be mixed is likely not very high. The reverse scenario is already supported: <ReplacementSwap/> can also handle transition:persist.

[tough oar]

ahhhh. Yeah I do play around with view transitions a lot

[barren cave]

If you have more such places where you need such a feature this could count as "sufficient interest" 😉

[barren cave]

Appreciate that!