mdn-view-transitions-demo

by Richard Hunter

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Basic View Transitions API demo</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 class="title">Basic View Transitions API demo</h1>
    
    <main>
      <section class="thumbs">
      
      </section>
      <section class="gallery-view">
        <figure>
          <img>
          <figcaption><div class="caption-text"></div></figcaption>
        </figure>
      </section>
    </main>

    <footer class="footer">
      <a href="https://glitch.com/edit/#!/basic-view-transitions-api">
        See source code
      </a>
    </footer>
  </body>
</html>

CSS

/* resets */

figure {
  margin: 0
}

/* layout */

body {
  width: 70%;
  max-width: 700px;

  margin: 0 auto;
}

main {
  display: flex;
}

img {
  border: 1px solid #999;
}

.thumbs img {
  display: block;
  margin: 10px;
  border-radius: 7px;
  opacity: 0.7;
}

a {
  outline: 0;
}

.thumbs a:hover img, .thumbs a:focus img {
  opacity: 1;
}

.thumbs img:first-child {
  margin-top: 0px;
}

.gallery-view img {
  max-width: 100%;
  margin-right: 10px;
  border-radius: 7px;
}

footer, figcaption {
  position: absolute;
  padding: 5px 10px;
  background-color: rgba(255,255,255,0.5);
}

footer {
  bottom: 3px;
  left: 3px;
}

figure {
  position: relative;
}

figcaption {
  top: 0px;
  right: -2px;
  border: 1px solid #999;
  border-radius: 0 7px 0 7px;
}

/* text */

h1, figcaption, a {
  font-family: 'Roboto Slab', serif;
}

h1 {
  text-align: center;
}

/* media queries */

@media (max-width: 980px) {
  body {
    width: 90%;
  }
}

@media (max-width: 700px) {
  body {
    width: 98%;
  }

  main {
    flex-direction: column;
  }

  .thumbs {
    display: flex;
    align-items: space-between;
    justify-content: space-between;
  }

  .thumbs img {
    margin: 0 0 10px 0;
  }
}

/* View Transitions CSS */

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

figcaption {
  view-transition-name: figure-caption;
}

/* Simple final style */

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: 100%;
}

/* Alternative custom animation style */

/* @keyframes grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes shrink-x {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption)...

JavaScript

const imageData = [
    {
        'name': 'Jungle coast',
        'file': 'jungle-coast',
    },
    {
        'name': 'Bird in the tree',
        'file': 'tree-bird',
    },
    {
        'name': 'A view from the sky',
        'file': 'view-from-the-sky',
    },
    {
        'name': 'The view across the water',
        'file': 'watery-view',
    }
]

const thumbs = document.querySelector('.thumbs');
const galleryImg = document.querySelector('.gallery-view img');
const galleryCaption = document.querySelector('.gallery-view figcaption');

function init() {
  imageData.forEach(data => {
    const img = document.createElement('img');
    const a = document.createElement('a');
    a.href = "#";
    a.title = `Click to load ${data.name} in main gallery view`;
    img.alt = data.name;
    img.src = `https://mdn.github.io/dom-examples/view-transitions/images/${ data.file }_th.jpg`;
    a.appendChild(img);
    thumbs.appendChild(a);
    
    a.addEventListener('click', updateView);
    a.addEventListener('keypress', updateView);
  }) 
  
  galleryImg.src = `images/${ imageData[0].file }.jpg`;
  galleryCaption.textContent = imageData[0].name;
}

function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  const targetIdentifier = event.target.firstChild || event.target;

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };
  
  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}

init();