在 Dart 2 中为 HTML 元素创建类似 jQuery 的动画

Question

如何在 Dart 2 中为类似于 jQuery fadeIn 或 fadeOut 的 HTML 元素创建动画？

我在dart:html 包中看到了这个animate 方法。但是，它似乎不会将元素的样式更改为最终状态，因此在动画完成后，元素会立即像动画开始之前一样回到第一个状态。文档中还指出，调用animate 不仅会创建Animation 类，还会调用play() 方法，因此动画会在创建时自动播放。

dart:html 包中的animate 是否使用 Web 动画，因此它根本不会改变 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

Answer 1

Dart 的动画 API 直接移植 Web Animations API，所以你可以用它做任何事情，你可以用几乎完全相同的方式在 Dart 中做任何事情。使用 WAAPI，创建动画总是涉及两个部分：指定关键帧（也称为效果），然后是 timing parameters（或者只是持续时间，如果不需要特定的时间效果）。

在计时参数中，有一个称为fill mode，它会影响动画未运行时元素的渲染方式。要让元素在动画结束后保持在动画结束时定义的状态，您只需将fill 参数设置为forwards。

就像 Javascript 中的 WAAPI 一样，在 Dart 中，动画时间参数设置在 animate 方法的第二个参数中，用 Map 代替了持续时间。这也是您设置延迟、缓动和动画方向等内容的地方。

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

Here's a working example.

您还可以在您希望它运行之前在元素上构造动画。 .animate 方法返回一个 Animation 对象，您可以从中存储和控制动画。您可以创建它，立即调用.pause，然后稍后播放，等等。这仍然与 WAAPI 完全一致。

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

Dart 的动画 API 文档确实很少，但由于它实际上与 WAAPI 相同（毕竟它是建立在它之上的），你需要做的就是查看它在 MDN 上的文档，然后从那里翻译成 Dart 的实现非常简单。