Skip to content

Commit

Permalink
update(CSS): web/css/@starting-style
Browse files Browse the repository at this point in the history
  • Loading branch information
undead404 committed Nov 18, 2024
1 parent cf20252 commit 4a4c904
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion files/uk/web/css/@starting-style/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ html {
Оскільки анімований елемент виводиться на {{glossary("top layer", "вищий шар")}} тоді, коли показується, і вилучається з вищого шару тоді, коли приховується (за допомогою {{cssxref("display", "display: none")}}), потрібно додаткові кроки, щоб забезпечити роботу анімації в обох напрямках:

- До списку перехідних елементів додається `display`, щоб забезпечити видимість анімованого елемента (задання `display: block` або іншого видимого значення `display`) протягом обох анімацій входу та виходу. Без цього анімація виходу не буде видимою; на практиці спливне віконце просто зникне. Зверніть увагу, що в скороченні також задається значення {{cssxref("transition-behavior", "transition-behavior: allow-discrete")}}, щоб увімкнути анімацію.
- До списку перехідних елементів додається {{cssxref("overlay")}}, щоб забезпечити відкладання вилучення елемента з вищого шару до закінчення анімації. Це несуттєво для простих анімацій, таких як ця, але в складніших випадках, якщо цього не робити, елемент буде вилучено з вищого шару занадто швидко, що призведе до того, що анімація не буде плавною й ефективною. Знову ж таки, в цьому випадку потрібно задати значення [`transition-behavior: allow-discrete`](/uk/docs/Web/CSS/transition-behavior), щоб анімація відбулася.
- До списку перехідних елементів додається {{cssxref("overlay")}}, щоб забезпечити відкладання вилучення елемента з вищого шару до закінчення анімації. Це несуттєво для анімацій, схожих на цю, але в складніших випадках, якщо цього не робити, елемент буде вилучено з вищого шару занадто швидко, що призведе до того, що анімація не буде плавною й ефективною. Знову ж таки, в цьому випадку потрібно задати значення [`transition-behavior: allow-discrete`](/uk/docs/Web/CSS/transition-behavior), щоб анімація відбулася.

> [!NOTE]
> Також додано перехід на {{cssxref("::backdrop")}}, що з'являється під спливним віконцем, коли воно відкрите, щоб забезпечити гарну анімацію затемнення. `[popover]:popover-open::backdrop` використовується для вибору задника, коли спливне віконце відкрите.
Expand Down

0 comments on commit 4a4c904

Please sign in to comment.