View Transition API MDN example

View Transition API MDN example

by Julien Etienne

HTML

<link rel="prefetch" href="https://mdn.github.io/dom-examples/view-transitions/images/jungle-coast.jpg" />
<link rel="prefetch" href="https://mdn.github.io/dom-examples/view-transitions/images/tree-bird.jpg" />
<link rel="prefetch" href="https://mdn.github.io/dom-examples/view-transitions/images/view-from-the-sky.jpg" />
<link rel="prefetch" href="https://mdn.github.io/dom-examples/view-transitions/images/watery-view.jpg" />

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

CSS

figure {
  margin: 0
}

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: 20000ms;
  animation-delay: 500ms;
  animation-timing-function: linear;
}

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

::view-transition-old(figure-caption) {
  transform: translateX(100px);
}
::view-transition-new(figure-caption) {
  transform: translateX(-100px);
}


/* Simple final style */

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

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 = `https://mdn.github.io/dom-examples/view-transitions/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();