Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<style>
@location --loc {
search: "target";
}
@navigation (to: --loc) {
#elm {
--matches-to: yes;
}
@view-transition {
navigation: auto;
}
}
@navigation (from: --loc) {
#elm {
--matches-from: yes;
}
}
::view-transition-group(*) {
animation-duration: 300s;
}
</style>
<div id="elm"></div>
<script>
const isTarget = new URLSearchParams(location.search).has('target');
const prefix = isTarget ? "target" : "source";
function getMatchResult(elm) {
const style = getComputedStyle(elm);
return { from: style.getPropertyValue("--matches-from") == "yes",
to: style.getPropertyValue("--matches-to") == "yes"};
}
function postToParent(msg, elm) {
let data = {msg:msg};
if (elm) {
data.match = getMatchResult(elm);
}
window.parent.postMessage(data);
}
if (!isTarget) {
window.addEventListener("message", (event)=> {
if (event.data == "navigate") {
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
navigation.navigate("?target");
});
});
}
});
}
if (isTarget) {
window.addEventListener("load", ()=> {
postToParent(`${prefix}.load`, elm);
let vt = document.activeViewTransition;
if (vt) {
vt.skipTransition();
} else {
postToParent("FAIL-NO-VT");
}
requestAnimationFrame(()=> {
requestAnimationFrame(()=> {
postToParent(`${prefix}.done`, elm);
});
});
});
}
window.addEventListener("pageswap", ()=> postToParent(`${prefix}.swap`, elm));
</script>