Анимация закрытия всплывающего круга не работает должным образом ⇐ Html

[Anonymous]

Нажмите на желтый, чтобы открыть. Открытие всплывающего окна работает (появляется в виде круговой анимации), однако анимации закрытия нет. Оно просто исчезает. (Похоже, что этот фрагмент работает, но не из моего html-файла, однако он не остается на верхнем уровне/слое).
Кроме того, мне нужно добавить этот временный стиль, чтобы анимация смахивания также не анимировалась, когда всплывающее окно открывается/закрывается. Существует ли подход на чистом CSS?

Код: Выделить всё

    const Transition = {
root: document.querySelector('html'),
swipe: {
pause: () => {
let style = document.createElement('style');
style.id = 'transition';
style.innerText = `
::view-transition-image-pair(root) {isolation: auto;}
::view-transition-old(root),::view-transition-new(root) {animation: none;}`;
document.head.appendChild(style);
},
resume: () => document.querySelector('#transition').remove()
},
};
document.querySelector('main').onclick = ({ clientX: x, clientY: y }) => {
let r = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
let tr = document.startViewTransition();
Transition.swipe.pause();
tr.ready.then(() => {
document.querySelector('dialog').show();
document.documentElement.animate({
clipPath: [`circle(0 at ${x}px ${y}px)`, `circle(${r}px at ${x}px ${y}px)`],
}, {
duration: 500,
pseudoElement: '::view-transition-new(root)',
});
});
tr.finished.then(() => Transition.swipe.resume());
}
document.querySelector('dialog').onclick = ({ clientX: x, clientY: y, currentTarget }) => {
let r = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
let tr = document.startViewTransition();
Transition.swipe.pause();
tr.ready.then(() => {
currentTarget.close();
document.documentElement.animate({
clipPath: [`circle(${r}px at ${x}px ${y}px)`, `circle(0 at ${x}px ${y}px)`],
}, {
duration: 500,
pseudoElement: '::view-transition-old(root)',
});
});
tr.finished.then(() => Transition.swipe.resume());
};

Код: Выделить всё

    main {
height: 30em;
background: yellow;
}

dialog {
inset: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
background: rgba(0, 0, 0, .5);
}

section {
height: 80em;
background: lightblue
}

@view-transition {
navigation: auto;
}

@keyframes exit {
to {
transform: translate(calc(var(--x)*100%), calc(var(--y)*100%));
}
}

@keyframes enter {
from {
transform: translate(calc(var(--x)*-100%), calc(var(--y)*-100%));
}
}

::view-transition-old(root) {
animation: .5s exit;
}

::view-transition-new(root) {
animation: .5s enter;
}

::view-transition-image-pair(root) {
--x: -1;
--y: 0;
}

Код: Выделить всё

[url=1.html]1[/url]


pop start

pop end

Подробнее здесь: https://stackoverflow.com/questions/798 ... s-intended