Сделаны ли переходы / анимации Svelte с помощью CSS или JS?

Question

Я проверяю Svelte и нахожу из коробки гораздо больше, чем я ожидал.

Одна вещь, которая немного удивила меня, где количество инструментов перехода и анимации, особенно инструментов для пользовательских переходов, и я не могу точно сказать по их синтаксису, являются ли они функциями, которые пишут CSS, или являются ли они функциями, которые манипулируют стили непосредственно с CSS-подобным синтаксисом.

Являются ли получающиеся анимации только CSS или нет?

Answer 1

Краткий ответ: CSS.

Более длинный ответ: когда вызывается функция перехода, она возвращает объект с объектом перехода, который должен включать css метод, tick метод или оба. tick метод прост - он вызывается каждый кадр (используя requestAnimationFrame, по сути), пока переход не завершится, что позволит вам делать вещи, которые невозможно просто с помощью CSS, например, эффект пишущей машинки.

css Метод работает по-другому. Допустим, у вас есть простой переход с постепенным исчезновением, который возвращает такую ​​функцию:

css: t => `opacity: ${t}`

(Это почти точно то, что делает встроенный переход затухания.) Эта функция будет вызываться несколько раз с другим значением t до начала перехода - количество раз зависит от продолжительности перехода - так что генерируется набор ключевых кадров:

keyframes = [
  '0% { opacity: 0 }',
  '10% { opacity: 0.1 }',
  '20% { opacity: 0.2 }',
  // ...
];

Эти ключевые кадры затем объединяются в CSS-анимацию и применяются к элементу.

В этом простом примере это может показаться слишком сложным - в конце концов, мы могли бы просто перейти от 0% { opacity: 0 } в 100% { opacity: 1 }, Но это дает нам возможность создавать собственные переходы с помощью функций замедления, которые обычно недоступны в CSS-анимации, и все это без обращения к манипулированию стилями в JavaScript (что должно происходить в главном потоке, создавая общий источник мусора).