Theo's Typesafe Cult•6mo ago

View transitions aren't working with multiple elements with the same classname

Hey, I have quite a unique problem and I tried searching for the solution but view transitions are relatively new. I am using the next-view-transitions package. View transitions work how I expect them to when there is a singular element with the transition classname. But, I want to map through posts, and then when you click on that post, the title of the post transitions smoothly onto the next page. I have deduced the problem to the fact that if you have multiple elements with the same transition name, then it will not work. Im wondering if anyone has a solution to this problem. Possibly dynamic classnames, manually defining classes 1-10 and using pagination so they each have their "individual values", but all of those solutions seem very complex for something that may be so simple. Thanks! Non Working:

{basePosts.map((post, _idx) => 
<span key={post.id} className={`transit ${post.id}`} >{post.title}</span>
        )}

{basePosts.map((post, _idx) => 
<span key={post.id} className={`transit ${post.id}`} >{post.title}</span>
        )}

Class defined in globals.css

.transit {
  view-transition-name: demo-title;
  width: fit-content;
}

.transit {
  view-transition-name: demo-title;
  width: fit-content;
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

View transitions aren't working with multiple elements with the same classname