Отже, ви хочете анімувати властивість display

Робоча група CSS пару тижнів тому позитивно оцінив це. Супер-пупер концептуальна пропозиція полягає в тому, що ми можемо оживити або перейти від, скажімо, display: block до display: none.

Це трохи головоломка, щоб міркувати про це, тому що налаштування display: none на елементі скасовує анімацію. І його додавання перезапускає анімацію. Відповідно до специфікації:

Налаштування display майно до none припинить будь-яку запущену анімацію, застосовану до елемента та його нащадків. Якщо елемент не має жодного відображення, оновлення відображення до значення, відмінного від none запустить усі анімації, застосовані до елемента animation-name властивості, а також усі анімації, застосовані до нащадків з display окрім none.

Ця циклічна поведінка робить концепцію, здавалося б, мертвою після прибуття. Але if @keyframes підтримував будь-який display значення окрім none, тоді немає способу для none щоб скасувати або перезапустити речі. Це дає не-none цінності пріоритетні, дозвол none виконувати свою роботу лише після завершення анімації або переходу.

Міріам гудок (це те, що ми насправді називаємо, чи не так?) пояснює, як це може працювати:

Ми не зовсім інтерполюємо між, скажімо, block та none, але дозволяючи block залишатися неушкодженим, доки предмети не перестануть рухатися й безпечно застосовувати none. Це ключові слова, тому між ними немає явних значень. Таким чином, це залишається дискретною анімацією. Ми перемикаємося між двома значеннями після завершення анімації.

Це Роберт Флекприклад взято прямо з обговорення:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

Це корисний приклад, оскільки він показує, як перший кадр встановлює елемент display: block, якому надається пріоритет над основним display: none як не-none значення. Це дозволяє запускати анімацію та завершувати без неї none скасування або скидання його в процесі, оскільки це лише вирішує після анімація.

Це приклад, який згадує Міріам на Mastodon:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

Цього разу ми маємо справу з переходом. Основний display значення встановлено на none до того, як щось станеться, тож це повністю поза документообігом. Тепер, якби ми перенесли це при наведенні, можливо, так:

.hide:hover {
  display: block;
  opacity: 1;
}

…тоді елемент теоретично має зникати на 200ms. Знову ми перемикаємось між ними display цінності, але block надається пріоритет, тому перехід не скасовується заздалегідь і фактично застосовується після opacity завершує свій перехід.

Принаймні так я це розумію. Я радий, що є надрозумні люди, які думають над цими речами, тому що я думаю, що є тонна, щоб розібратися. Наприклад, що станеться, якщо одному елементу призначити кілька анімацій — буде none скинути чи скасувати будь-який із них? Я впевнений, що все, починаючи від нескінченної анімації, перевернутих напрямків і всіляких інших речей, буде розглянуто з часом.

Але який суперкрутий перший крок!