Блог

Главная - Вопросы по программированию - Можно ли вызвать «анимацию» и определить обратный вызов по завершении с помощью одного выражения в собственном API анимации JavaScript?

Можно ли вызвать «анимацию» и определить обратный вызов по завершении с помощью одного выражения в собственном API анимации JavaScript?

#javascript

#язык JavaScript

Вопрос:

Насколько мне нравится документация, похоже, что для определения обратного вызова анимации требуется:

  1. Создайте экземпляр анимации
  2. Определите onfinish обратный вызов
  3. Воспроизвести анимацию

Есть ли способ сделать то же самое с одним выражением, как показано ниже?

 Snackbar.rootElement.animate([  {  opacity: 1,  transform: "none"  },  {  opacity: 0,  transform: "translateY(-200%)"  } ], {  duration: 500,  easing: "ease-in" })  // ↓ [Warning] It just a desired syntax, NOT A VALID SYNTAX  .onfinish(() =gt; {  Snackbar.rootElement.remove();  });

Комментарии:

1. @CertainPerformance, спасибо за комментарий. Машинопись сообщает мне, что синтаксис onfinish?.((animaton: Animation, animationPlaybackEvent: AnimationPlaybackEvent) =gt; {}) неверен. Я снова прокомментирую ваш ответ ниже.

Ответ №1:

onfinish это сеттер, а не метод — если вы назначите его вместо вызова как функции, он будет работать:

 console.log('start');  const d = document.createElement('div'); const res = d.animate([  {  opacity: 1,  transform: "none"  },  {  opacity: 0,  transform: "translateY(-200%)"  } ], {  duration: 500,  easing: "ease-in" })  .onfinish = (() =gt; {  console.log('finished');  });

Другой вариант, с addEventListener :

 console.log('start');  const d = document.createElement('div'); const res = d.animate([  {  opacity: 1,  transform: "none"  },  {  opacity: 0,  transform: "translateY(-200%)"  } ], {  duration: 500,  easing: "ease-in" })  .addEventListener('finish', () =gt; {  console.log('finished');  });

По аналогичным причинам не работает следующее:

 const obj = {  set foo(arg) {  console.log('called foo');  } };  obj.foo(123);

Задатчик можно вызвать, назначив ему, но не вызывая его, как если бы это была функция (даже если это внутренняя функция).

Комментарии:

1. Спасибо вам за ответ! Второе решение работает нормально. Согласно определениям типов машинописных текстов, onfinish это может быть null ( onfinish: ((this: Animation, ev: AnimationPlaybackEvent) =gt; any) | null; ), и в моем случае это так.

Метки: