1 => 0 за 200ms,
через стандартный cubic-bezier(0.4, 0, 0.2, 1);
Все что для этого требуется:
1. Применить один стиль elementClass = 'first', где
.first { transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; }
2. Обновить DOM tick() или setTimeout(..., 0)
3. Применить второй стиль elementClass = 'second', где
.second { opacity: 0; }
4. Подождать 200ms setTimeout(..., 200)
5. Удалить элемент
Если использовать
<div out:fade|local={{duration: 200, easing:???}}></div>
То вместо двух стилей и 5 шагов, svelte породит CSS Animation с кучей промежуточных keyframes и локальными префиксами, что дико избыточно для пары стилей и одной задержки при удалении элемента
Лучше уж ивенты как мне кажется слушать
Обсуждают сегодня