CODEWITHSUNDEEP
javascriptview-transitions-api
Mikevano
Mikevano

Reputation: 1

I have a question about the finished promise from the View Transitions Api. I don't understand it so good

I have a question regarding the view transitions API. I understand that the finished promise is executed as soon as the ready promise is completed. But can anyone help me better understand why you would use this finished promise?

let lastClick;
addEventListener("click", (event) => (lastClick = event));

function navigateToCards(data) {
  if (!document.startViewTransition) {
    updateDOM(data);
    return;
  }

  const transition = document.startViewTransition(() => {
    updateDOM(data); 
  });

  
  transition.ready.then(() => {
    document.documentElement.animate(
      {
        transform: [
          `translateX(100%)`,
          `translateX(0%)`,
        ],
      },
      {
        duration: 300, 
        easing: 'ease-in-out', 
        pseudoElement: "::view-transition-new(cards)",
      }
    );
  });
} This will animate the cards on the other page when i navigate to this page. But can someone help me understand where for i can use the finished promise?

Upvotes: 0

Views: 89

Answers (1)

Ali Gates
Ali Gates

Reputation: 1

The finished promise in the view transitions API can be useful for tasks you want to execute after completing the transition animation. In your provided code, the finished promise isn't explicitly used. Still, it can be handy in scenarios where you must perform some action only after the transition animation is finished.

Upvotes: 0

Related Questions