Skip to content

Commit a5efd00

Browse files
kotosha-realsolarrustvitya-neskorobaeus
authored
Добавляет доку про @view-transition (#5775)
* Добавляет доку про @view-transition * Исправляет ошибки линтера * Немного редактирует * Добавляет конфиг baseline * Докручивает форматирование в стиле Доки * Вносит правки по ревью * Правит блок с примером * Приводит файловую структуру в соответствие с соглашением и убирает border-radius у блоков --------- Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com> Co-authored-by: vitya-ne <9317613+vitya-ne@users.noreply.github.com> Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com>
1 parent 9682844 commit a5efd00

File tree

8 files changed

+1464
-0
lines changed

8 files changed

+1464
-0
lines changed

‎css/view-transition/demos/mpa-with-granular-animations/articles/view-transition-plus-css-animations.html‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<title>MPA с гранулярными анимациями — @view-transition — Дока</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
10+
<style>
11+
*, *::before, *::after {
12+
margin: 0;
13+
padding: 0;
14+
box-sizing: border-box;
15+
}
16+
17+
html {
18+
color-scheme: dark;
19+
}
20+
21+
body {
22+
min-height: 100vh;
23+
padding: 50px;
24+
display: flex;
25+
justify-content: center;
26+
background-color: #18191C;
27+
color: #FFFFFF;
28+
font-family: Roboto, sans-serif;
29+
font-size: 16px;
30+
}
31+
32+
p {
33+
margin: 7px 0;
34+
font-size: 1rem;
35+
line-height: 1.4;
36+
}
37+
38+
h1 {
39+
margin-bottom: 17px;
40+
font-weight: 500;
41+
font-size: 1.625rem;
42+
}
43+
44+
h2 {
45+
margin-top: 40px;
46+
margin-bottom: 17px;
47+
font-weight: 500;
48+
font-size: 1.375rem;
49+
}
50+
51+
a {
52+
border-radius: 3px;
53+
color: inherit;
54+
-webkit-text-decoration-color: #2E9AFF;
55+
text-decoration-color: #2E9AFF;
56+
text-decoration-thickness: 2px;
57+
transition: background-color 0.2s linear;
58+
}
59+
60+
a:hover, a:focus {
61+
background-color: #2E9AFF;
62+
transition: background-color 0.2s linear;
63+
outline-width: 0;
64+
}
65+
66+
.container {
67+
width: 100%;
68+
max-width: 60em;
69+
margin: 0 auto;
70+
}
71+
72+
.article {
73+
padding: 1em;
74+
border: 1px solid #2E9AFF;
75+
}
76+
77+
.article-content {
78+
margin: 0;
79+
}
80+
81+
.back-button {
82+
display: inline-block;
83+
margin-bottom: 1em;
84+
}
85+
86+
@media (max-width: 768px) {
87+
body {
88+
padding: 30px;
89+
}
90+
}
91+
92+
@view-transition {
93+
navigation: auto;
94+
}
95+
96+
@keyframes zoomOut {
97+
from {
98+
transform: scale(1);
99+
opacity: 1;
100+
}
101+
102+
to {
103+
transform: scale(0.8);
104+
opacity: 0;
105+
}
106+
}
107+
108+
@keyframes zoomIn {
109+
from {
110+
transform: scale(0.8);
111+
opacity: 0;
112+
}
113+
114+
to {
115+
transform: scale(1);
116+
opacity: 1;
117+
}
118+
}
119+
120+
@keyframes slideIn {
121+
from {
122+
transform: translateX(100%);
123+
}
124+
125+
to {
126+
transform: translateX(0);
127+
}
128+
}
129+
130+
@keyframes slideOut {
131+
from {
132+
transform: translateX(0);
133+
}
134+
135+
to {
136+
transform: translateX(100%);
137+
}
138+
}
139+
140+
@keyframes fadeOut {
141+
from {
142+
opacity: 1;
143+
}
144+
145+
to {
146+
opacity: 0;
147+
}
148+
}
149+
150+
@keyframes fadeIn {
151+
from {
152+
opacity: 0;
153+
}
154+
155+
to {
156+
opacity: 1;
157+
}
158+
}
159+
160+
header {
161+
view-transition-name: header;
162+
}
163+
164+
::view-transition-old(root) {
165+
animation: 0.3s ease-in-out both zoomOut;
166+
}
167+
168+
::view-transition-new(root) {
169+
animation: 0.3s ease-in-out both slideIn;
170+
}
171+
172+
::view-transition-old(header) {
173+
animation: 0.3s ease-in-out both fadeOut;
174+
}
175+
176+
::view-transition-new(header) {
177+
animation: 0.3s ease-in-out both fadeIn;
178+
}
179+
</style>
180+
</head>
181+
<body>
182+
<div class="container">
183+
<header>
184+
<h1>@view-transition + CSS-анимации = ❤️</h1>
185+
</header>
186+
187+
<a href="../index.html" class="back-button">← Назад к списку</a>
188+
189+
<article class="article">
190+
<p class="article-content">Добавить свою кастомную анимацию к плавным переходам между страницами сайта очень просто. Используйте для этого <del>простые советские</del> CSS-анимации.</p>
191+
</article>
192+
</div>
193+
194+
<script>
195+
new ResizeObserver(() => {
196+
const data = {
197+
id: 'mpa',
198+
height: document.body.getBoundingClientRect().height,
199+
};
200+
201+
window.parent.postMessage(data);
202+
}).observe(document.body);
203+
</script>
204+
</body>
205+
</html>

0 commit comments

Comments
 (0)