Struggling with the new view transitions API

Hi! I am exploring the View transitions API. I have a simple demo with just a box that changes background-color and width on click. Since I see some things I don't understand (the height also changes during animation) I wanted to try to debug/replay it in the browser dev tools. EDIT: I kinda solved it, but I am struggling with the API itself. Please jump down to the latest reply I open the Animations drawer, I click the box, I record the animation, I see it right there. But I cannot figure out how to "replay it". When I click play, change speed, or draw manually, nothing happens in the main browser window. I don't understand. What do I have to do to actually see the animation being replayed. Anyone else here exploring the the animations dev tools, who could explain how to use it?
No description
3 Replies
einarpersson
einarpersson14mo ago
Okey, now I'm starting to understand the problem. I am able to do what I want for normal transitions. But for the ::view-transitions I am not able to replay it.
einarpersson
einarpersson14mo ago
Gah I am so annoyed. Web Animations API is praised, but I am not able to do a simple thing like this: 1. Change background color smoothly (CHECK!) 2. Change width (NO!) The animation "jumps" and the boxes are twice as high during the animation since they stack
import "./style.css";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
<div>
<div id="box"/>
</div>
`;

document
.querySelector<HTMLDivElement>("#box")!
.addEventListener("click", (ev) => {
const currentTarget = ev.currentTarget as HTMLDivElement;

document.startViewTransition(() => {
currentTarget.style.backgroundColor =
currentTarget.style.backgroundColor === "coral" ? "blue" : "coral";

currentTarget.style.width =
currentTarget.style.width === "100px" ? "200px" : "100px";
});
});
import "./style.css";

document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
<div>
<div id="box"/>
</div>
`;

document
.querySelector<HTMLDivElement>("#box")!
.addEventListener("click", (ev) => {
const currentTarget = ev.currentTarget as HTMLDivElement;

document.startViewTransition(() => {
currentTarget.style.backgroundColor =
currentTarget.style.backgroundColor === "coral" ? "blue" : "coral";

currentTarget.style.width =
currentTarget.style.width === "100px" ? "200px" : "100px";
});
});
#box {
view-transition-name: box;
background-color: coral;
width: 500px;
height: 200px;
}

::view-transition-old(box),
::view-transition-new(box) {
animation-duration: 1s;
}
#box {
view-transition-name: box;
background-color: coral;
width: 500px;
height: 200px;
}

::view-transition-old(box),
::view-transition-new(box) {
animation-duration: 1s;
}
No description
einarpersson
einarpersson14mo ago
Specifying a height solved it, but I don't reaally understand why and how this cannot be mentioned anywhere. The docs really need more basic examples and pitfalls...
::view-transition-old(box),
::view-transition-new(box) {
animation-duration: 1s;
height: 100%;
}
::view-transition-old(box),
::view-transition-new(box) {
animation-duration: 1s;
height: 100%;
}
Want results from more Discord servers?
Add your server