[CSS] View Transition

/* View Transitions */

/* STEP 1 */


::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 1s;
}


/* STEP 2 */


@keyframes fade-in {
    from { opacity: 0; }
  }
  
  @keyframes fade-out {
    to { opacity: 0; }
  }
  
  @keyframes slide-from-right {
    from { transform: translateX(60px); }
  }
  
  @keyframes slide-to-left {
    to { transform: translateX(-60px); }
  }
  
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }
  
  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }

/* STEP 3 */

body>header {
    // this allow header escape root view transition
    view-transition-name: main-header;    
}

/* STEP 4 */
details-page::part(image) {
    width: 120%;
    margin-left: -10%;
}

::view-transition-new(image) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in
}

 

Let's say we have a ProductList page and DetailPage... and we will display same image in both page, we want to apply view transition on the image.

ProducList page:

    // add view transition control
    // the viewTransitionName for product list page should match the viewTransitionName for product detail page
    this.querySelector("img").style.viewTransitionName = `image-${product.id}`;

Detail Page:

      this.root.querySelector(
        "img"
      ).style.viewTransitionName = `image-${this.product.id}`;

 

Code: https://github.com/zhentian-wan/webapp-patterns-projects/blob/main/CoffeeMasters/final/styles.css