Сделаны ли переходы / анимации Svelte с помощью CSS или JS? - PullRequest
Новая
       15

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

1 голос
/ 13 мая 2019

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

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

Полученные анимации только CSS или нет?

1 Ответ

4 голосов
/ 13 мая 2019

Краткий ответ: 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 (что должно происходить в главном потоке, создавая общий источник). рывка.)

...