/
githubmr
/
facebook-react
Обзор
Документация
Войти
/
githubmr
/
facebook-react
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
main
fixtures/view-transition/src/components/Transitions.module.css
81 строка
2 KB
Sebastian Markbåge
Add forwards fill mode to animations in view transition fixture (#34502)
16 сен 2025, 17:20
Не верифицирован
16 сен 2025, 17:20
5e0c951
Код
Авторство
О чём код?
@keyframes enter-slide-right { 0% { opacity: 0; translate: -200px 0; } 100% { opacity: 1; translate: 0 0; } } @keyframes enter-slide-left { 0% { opacity: 0; translate: 200px 0; } 100% { opacity: 1; translate: 0 0; } } @keyframes exit-slide-right { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 200px 0; } } @keyframes exit-slide-left { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: -200px 0; } } ::view-transition-new(.slide-right) { animation: enter-slide-right ease-in 0.25s; } ::view-transition-old(.slide-right) { animation: exit-slide-right ease-in 0.25s; } ::view-transition-new(.slide-left) { animation: enter-slide-left ease-in 0.25s; } ::view-transition-old(.slide-left) { animation: exit-slide-left ease-in 0.25s; } ::view-transition-new(.enter-slide-right):only-child { animation: enter-slide-right ease-in 0.25s forwards; } ::view-transition-old(.exit-slide-left):only-child { animation: exit-slide-left ease-in 0.25s forwards; } :root:active-view-transition-type(navigation-back) { &::view-transition-new(.slide-on-nav) { animation: enter-slide-right ease-in 0.25s; } &::view-transition-old(.slide-on-nav) { animation: exit-slide-right ease-in 0.25s; } } :root:active-view-transition-type(navigation-forward) { &::view-transition-new(.slide-on-nav) { animation: enter-slide-left ease-in 0.25s; } &::view-transition-old(.slide-on-nav) { animation: exit-slide-left ease-in 0.25s; } }