Просмотр трансфера для обратного циркулярного раскрытия (анимируйте старую страницу вместо новой) ⇐ CSS

[Anonymous]

Ситуация
Рассмотрим следующую транзицию просмотра между двумя страницами HTML (многостраничное приложение, MPA).


https://i.sstatic.net/bols просто.

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

[*]



old.html
[url=new.html]--- Go to new.html ---[/url]













new.html
[url=old.html]Go to old.html[/url]



< /code>
/* view_transition.css */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
}

/* new.css */
::view-transition-old(root) {
animation: none;
}

::view-transition-new(root) {
animation: hole 1500ms ease-in;
}

@keyframes hole {
from {
clip-path: circle(0% at 50% 50%);
}

to {
clip-path: circle(100% at 50% 50%);
}
}

Цель

• В текущей анимации страница новая -это разбавление (от центра до полной ширины). Полная ширина к центру).

. /> Проблема с этим заключается в том, что новый порядок покраски перехода (см. Также View Transition псевдо-элементы). Новая страница всегда нарисована сверху. Поэтому я вижу здесь два варианта: < /p>

[*] Придется придумать анимацию, которая описывает, как будет выглядеть желаемый эффект на новой странице < /em> (которая отображается на вершине). Топологически говоря, мы должны были бы описать, что делает комплемент круга внутри прямоугольника окна (синяя часть с белыми стрелками на изображении выше).

Придется каким -то образом убедить браузер, что во время анимации мы хотим всегда разобраться в Old на вершине. Затем можно было просто описать анимацию как сокращающийся круг. См. Также мой комментарий здесь. < /P>
< /li>
< /ol>
Я попытался реализовать обе идеи без успеха. Для второй идеи я могу порекомендовать пост, почему мой CSS рассматривает переход игнорирует Z-индекс? Я попытался добавить имени просмотра CSS-стиля имени: Body Old; к тегу old.html и скорректировал new.css к этому:



Подробнее здесь: https://stackoverflow.com/questions/797 ... of-new-one