doka-guide · akhmadullin · Nov 10, 2024 · Nov 16, 2024 · Nov 16, 2024 · Nov 16, 2024
@@ -93,6 +93,7 @@ groups:
       - media
       - supports
       - layer
+      - starting-style
   - name: 'Глобальные ключевые слова'
     items:
       - global-keywords

@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Анимация появления диалога — @starting-style — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+      font-size: 24px;
+    }
+
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .button {
+        display: block;
+        border: 2px solid transparent;
+        border-radius: 6px;
+        padding: 9px 15px;
+        color: #000000;
+        font-size: 1.12rem;
+        font-weight: 300;
+        font-family: inherit;
+        transition: background-color 0.15s ease-in;
+        cursor: pointer;
+        background-color: #2E9AFF;
+    }
+
+    .button:hover {
+        background-color: #FFFFFF;
+    }
+
+    .dialog-button {
+        border-color: #000000;
+        width: 100%;
+    }
+
+    .mb-20 {
+        margin-bottom: 20px;
+    }
+
+    dialog {
+        padding: 20px;
+        border: none;
+        border-radius: 16px;
+        margin: auto;
+    }
+
+    /* стили для открытого диалога */
+    dialog {
+        opacity: 1;
+        scale: 1;
+        transition:
+            opacity 0.4s ease-in,
+            scale 0.4s ease-in,
+            display 0.4s ease-in allow-discrete;
+    }
+
+    /* стили для открывающегося диалога */
+    @starting-style {
+        dialog {
+            opacity: 0;
+            scale: 1.1;
+        }
+    }
+
+    /* стили для закрывающегося диалога */
+    dialog:not([open]) {
+        opacity: 0;
+        scale: 0.8;
+    }
+  </style>
+</head>
+<body>
+    <button id="open-dialog" class="button">Открыть диалог</button>
+    <dialog id="animated-dialog">
+        <h3 class="mb-20">Анимированный диалог</h3>
+        <p class="mb-20">Плавно появляюсь и плавно исчезаю</p>
+        <button id="close-dialog" class="button dialog-button">Закрыть диалог</button>
+    </dialog>
+    <script>
+        const dialog = document.querySelector('#animated-dialog')
+        const openDialogButton = document.querySelector('#open-dialog')
+        const closeDialogButton = document.querySelector('#close-dialog')
+
+        openDialogButton?.addEventListener('click', () => {
+            dialog?.showModal()
+        })
+
+        closeDialogButton?.addEventListener('click', () => {
+            dialog?.close()
+        })
+    </script>
+</body>
+</html>
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Анимация появления поповера — @starting-style — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+      font-size: 24px;
+    }
+
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .button {
+        display: block;
+        border: 2px solid transparent;
+        border-radius: 6px;
+        padding: 9px 15px;
+        color: #000000;
+        font-size: 1.12rem;
+        font-weight: 300;
+        font-family: inherit;
+        transition: background-color 0.15s ease-in;
+        cursor: pointer;
+        background-color: #FF8630;;
+    }
+
+    .button:hover {
+        background-color: #FFFFFF;
+    }
+
+    .mb-150 {
+        margin-bottom: 150px;
+    }
+
+    [popover] {
+        padding: 20px;
+        border: none;
+        border-radius: 16px;
+        margin: auto;
+    }
+
+    [popover] {
+        transition:
+            opacity 0.4s ease-in,
+            scale 0.4s ease-in,
+            translate 0.4s ease-in,
+            display 0.4s ease-in allow-discrete;
+    }
+
+    /* стили для открытого поповера */
+    [popover]:popover-open {
+        opacity: 1;
+        scale: 1;
+        translate: 0;
+    }
+
+    /* стили для открывающегося поповера */
+    @starting-style {
+        [popover]:popover-open {
+            opacity: 0;
+            scale: 0.5;
+            translate: 0 70px;
+        }
+    }
+
+    /* стили для закрывающегося поповера */
+    [popover]:not(:popover-open) {
+        opacity: 0;
+        scale: 0.5;
+        translate: 0 50px;
+    }
+  </style>
+</head>
+<body>
+    <button popovertarget="animated-popover" class="button mb-150">Показать поповер</button>
+    <div popover id="animated-popover">
+        <p>Анимированный поповер</p>
+    </div>
+</body>
+</html>
@@ -0,0 +1,150 @@
+---
+title: "`@starting-style`"
+description: "Директива для описания начальных стилей элемента в момент его появления на экране."
+authors:
+  - akhmadullin
+related:
+  - html/dialog
+  - html/popover
+  - css/opacity
+tags:
+  - doka
+---
+
+
+## Кратко
+
+Директива `@starting-style` позволяет задать начальные стили для элемента в момент его _появления_ на странице.
+
+## Пример
+
+```css
+.element {
+  background-color: tomato;
+}
+
+@starting-style {
+  .element {
+    background-color: orange;
+  }
+}
+```
+
+## Как понять
+
+При верстке сайтов бывает нужно привлечь внимание пользователя к появлению некоторых элементов на странице. Например, плавно сменить цвет фона блока в момент загрузки сайта. Или сделать открытие диалога плавным и аккуратным. То есть нам необходимо осуществить переход из начального состояния элемента в основное. При этом сделать это нужно один раз и именно в момент появления элемента на экране.
+
+Чтобы сообщить браузеру, какие должны быть стили у элемента в его начальном состоянии, используется директива `@starting-style`.
+
+## Как пишется
+
+В общем виде синтаксис выглядит так:
+
+```css
+.element {
+  /*
+    Стили для основного состояния элемента.
+    Будут применены после появления элемента на странице.
+  */
+}
+
+@starting-style {
+  .element {
+    /*
+      Стили для начального состояния элемента.
+      Будут применены в момент появления элемента на странице.
+    */
+  }
+}
+```
+
+Например:
+
+```css
+.promo-block {
+  opacity: 1;
+}
+
+@starting-style {
+  .promo-block {
+    opacity: 0;
+  }
+}
+```
+
+В момент загрузки страницы `.promo-block` будет не виден, так как в начальном состоянии [`opacity`](/css/opacity/) равен нулю. После загрузки страницы применятся стили из основного состояния: `opacity` будет равен единице и `.promo-block` отобразится на экране.
+
+## Использование
+
+`@starting-style` классно подходит для добавления анимации на открытие диалога или поповера.
+
+Например, с помощью `@starting-style` мы можем сделать появление диалога более плавным:
+
+```css
+/* стили для открытого диалога */
+dialog {
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity 0.4s ease-in,
+    scale 0.4s ease-in,
+    display 0.4s ease-in allow-discrete;
+}
+
+/* стили для открывающегося диалога */
+@starting-style {
+  dialog {
+    opacity: 0;
+    scale: 1.1;
+  }
+}
+
+/* стили для закрывающегося диалога */
+dialog:not([open]) {
+  opacity: 0;
+  scale: 0.8;
+}
+```
+
+<iframe title="Анимация появления диалога" src="demos/dialog-animation" height="360"></iframe>
+
+Такой же подход можно применить и для анимации поповера:
+
+```css
+[popover] {
+  transition:
+    opacity 0.4s ease-in,
+    scale 0.4s ease-in,
+    translate 0.4s ease-in,
+    display 0.4s ease-in allow-discrete;
+}
+
+/* стили для открытого поповера */
+[popover]:popover-open {
+  opacity: 1;
+  scale: 1;
+  translate: 0;
+}
+
+/* стили для открывающегося поповера */
+@starting-style {
+  [popover]:popover-open {
+    opacity: 0;
+    scale: 0.5;
+    translate: 0 70px;
+  }
+}
+
+/* стили для закрывающегося поповера */
+[popover]:not(:popover-open) {
+  opacity: 0;
+  scale: 0.5;
+  translate: 0 50px;
+}
+```
+
+<iframe title="Анимация появления поповера" src="demos/popover-animation" height="360"></iframe>
+
+## Подсказки
+
+💡 CSS-правила внутри `@starting-style` не вводят нового порядка в каскад стилей. Это означает, что стили внутри `@starting-style` не обязательно будут «важней» стилей, описанных снаружи. Чтобы гарантировать, что стили начального состояния не будут перезаписаны стилями основного состояния, помещайте `@starting-style` после объявлений основных стилей элемента.
diff --git a/people/akhmadullin/index.md b/people/akhmadullin/index.md
@@ -0,0 +1,7 @@
+---
+name: 'Рома Ахмадуллин'
+url: https://github.com/akhmadullin
+photo: photo.jpg
+---
+
+Фронтенд-разработчик. Люблю веб-стандарты и Open Source. Нравится изучать новое и делиться находками с другими.
diff --git a/people/akhmadullin/photo.jpg b/people/akhmadullin/photo.jpg