OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

View transitions inside of a map

  • Thread starter Thread starter Anthony Ruvinov
  • Start date Start date
A

Anthony Ruvinov

Guest
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:

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

Class defined in globals.css

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

<p>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.</p>
<p>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!</p>
<p>Non Working:</p>
<pre><code>{basePosts.map((post, _idx) =>
<span key={post.id} className={`transit ${post.id}`} >{post.title}</span>
)}
</code></pre>
<p>Class defined in globals.css</p>
<pre><code>.transit {
view-transition-name: demo-title;
width: fit-content;
}
</code></pre>
 

Latest posts

D
Replies
0
Views
1
Domantas Giedraitis
D
Top