Создание jQuery-подобных анимаций в Dart 2 для элемента HTML - PullRequest
Новая
       19

Создание jQuery-подобных анимаций в Dart 2 для элемента HTML

0 голосов
/ 25 августа 2018

Как создать анимацию для элемента HTML в Dart 2, который напоминает jQuery fadeIn или fadeOut?

Я видел этот animate метод в пакете dart:html. Однако кажется, что он не меняет стиль элемента до конечного состояния, поэтому после завершения анимации элемент немедленно возвращается в первое состояние, как до запуска анимации. В документации также указано, что вызов animate не только создаст класс Animation, но также вызовет метод play(), поэтому анимация воспроизводится автоматически при создании.

Использует ли animate в пакете dart:html Web Animation, чтобы он вообще не изменял стиль элемента HTML? Если да, как я могу сохранить состояние элемента после завершения анимации? Я вижу, что при использовании jQuery fadeIn непрозрачность элемента время от времени изменяется от 0 до конечного состояния, равного 1. Поэтому после завершения анимации непрозрачность элемента остается равной 1.

Я надеюсь, что смогу избежать этого: 

elem.animate([{"opacity": 1}, {"opacity": 0}], 100); // animation is played immediately after this
elem.style.opacity = "0"; // force set the style to 0
elem.style.display = "none"; // also force set the display to none

1 Ответ

0 голосов
/ 27 августа 2018

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

Среди параметров синхронизации есть параметр, называемый режим заполнения , который влияет на способ визуализации элемента, когда анимация не активна.Чтобы элемент оставался в состоянии, определяемом концом анимации после его завершения, все, что вам нужно сделать, это установить для параметра fill значение forwards.

Так же, как с WAAPI в Javascript,в Dart параметры синхронизации анимации устанавливаются во 2-м параметре метода animate, а Map вместо просто длительности.Здесь также можно задать такие параметры, как задержка, замедление и направление анимации. 

//Notice that this Dart code is entirely compatible with JS!
el.animate([{"opacity": 0}], {
  "duration": 1000,
  "fill": "forwards"
});

Вот рабочий пример .

Вы также можете создавать анимации для элемента до вы хотите, чтобы он работал.Метод .animate возвращает объект Animation , с которого можно хранить анимацию и управлять ею.Вы можете создать его, немедленно вызвать .pause, а затем воспроизвести его, помимо прочего.Это все еще в полном паритете с WAAPI.

Animation fadeOutEl = el.animate([{"opacity": 0}], {
  "duration": 1000,
  "fill": "forwards"
})..pause();
// Somewhere else 
fadeOutEl.play();

Документация Dart по API-интерфейсу анимации определенно скудна, но, поскольку он фактически идентичен WAAPI (и все-таки основан на нем), все, что вам нужно сделать, - взглянуть на его документы по MDN иоттуда перевод к реализации Дартса довольно тривиален.

...