Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Browser CSS Page Transitions API aka Shared Element Transitions

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers on the web. <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Prismic__Sponsor_2" name="Prismic__Sponsor_2"></a>Prismic - Sponsor</h2> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>. <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor</h2> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <h2 class="code-line" data-line-start="10" data-line-end="11"> <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="12" data-line-end="14"> WICG <a href= "https://github.com/WICG/shared-element-transitions/">Shared Element Transitions</a> </li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=00:21">00:21</a> Welcome </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=01:33">01:33</a> Sponsor: Prismic </li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=02:43">02:43</a> Sponsor: LogRocket </li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=04:18">04:18</a> Browser animations on the web vs native apps </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=06:15">06:15</a> What is the targeted use case for it? </li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=06:56">06:56</a> Shared Element to Root Transitions </li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=11:14">11:14</a> Entry and Exit </li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=17:33">17:33</a> How to enable this in Chrome </li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://github.com/WICG/shared-element-transitions/tree/main/sample-code"> Example Code</a> </li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://css-tricks.com/shared-element-transitions/#aa-weird-history"> Shared Element Transition history</a> </li> <li class="has-line-data" data-line-start="24" data-line-end="26"> <a href= "https://twitter.com/sarah_edo/status/988414671232339970">Sarah Drasner’s demo</a> </li> </ul> <pre> <code class="has-line-data" data-line-start="27" data-line-end= "61">async function doTransition() { let transition = document.createDocumentTransition(); // Specify offered elements. The tag below is used to refer // to the generated pseudo elemends in script/CSS. document.querySelector(".old-message").style.pageTransitionTag = "message"; // The start() call triggers an async operation to capture // snapshots for the offered elements, await transition.start(async () => { // This callback is invoked by the browser when the capture // finishes and the DOM can be switched to the new state. // No frames are rendered until this callback returns. // Asynchronously load the new page. await coolFramework.changeTheDOMToPageB(); // Clear the old message if that element is still in the page document.querySelector(".old-message").style.pageTransitionTag = ""; // Set new message as the shared element 'message' document.querySelector(".new-message").style.pageTransitionTag = "message"; // Set up animations using WA-API on the next frame. requestAnimationFrame(() => { document.documentElement.animate(keyframes, { ...animationOptions, pseudoElement: "::page-transition-container(message)", }); }); // Note that when this callback finishes, the animations will start with the tagged elements. }); } </code> </pre> <h2 class="code-line" data-line-start="62" data-line-end="63"> <a id="Tweet_us_your_tasty_treats_62" name= "Tweet_us_your_tasty_treats_62"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers on the web.
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes  WICG Shared Element Transitions

  00:21 Welcome

  01:33 Sponsor: Prismic

  02:43 Sponsor: LogRocket

  04:18 Browser animations on the web vs native apps

  06:15 What is the targeted use case for it?

  06:56 Shared Element to Root Transitions

  11:14 Entry and Exit

  17:33 How to enable this in Chrome

  Example Code

  Shared Element Transition history

  Sarah Drasner’s demo

  async function doTransition() {  let transition = document.createDocumentTransition();   // Specify offered elements. The tag below is used to refer  // to the generated pseudo elemends in script/CSS. document.querySelector(".old-message").style.pageTransitionTag = "message";   // The start() call triggers an async operation to capture  // snapshots for the offered elements,  await transition.start(async () => {   // This callback is invoked by the browser when the capture   // finishes and the DOM can be switched to the new state.  // No frames are rendered until this callback returns.     // Asynchronously load the new page.  await coolFramework.changeTheDOMToPageB();     // Clear the old message if that element is still in the page   document.querySelector(".old-message").style.pageTransitionTag = "";   // Set new message as the shared element 'message'   document.querySelector(".new-message").style.pageTransitionTag = "message";     // Set up animations using WA-API on the next frame.  requestAnimationFrame(() => {    document.documentElement.animate(keyframes, {   ...animationOptions,    pseudoElement: "::page-transition-container(message)",    });   });     // Note that when this callback finishes, the animations will start with the tagged elements. }); }  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Browser CSS Page Transitions API aka Shared Element Transitions

Poslechněte si podcast