Creating jQuery-like animations in Dart 2 for a HTML element

Issue

How to create animation for a HTML element in Dart 2 that resembles jQuery fadeIn or fadeOut?

I saw this animate method in the dart:html package. However, it seems that it does not change the style of the element to the final state so after the animation is completed the element immediately turns back into the first state like before the animation was started. It is also stated by the documentation that calling animate will not only create an Animation class but also calling the play() method too so the animation is played automatically upon creation.

Does animate in the dart:html package use Web Animation so it does not change the style of the HTML element at all? If so, how can I persist the state of the element after the animation has completed? I can see that using jQuery fadeIn the opacity of the element changes from time to time from 0 to the final state which is 1. So after the animation has completed, the opacity of the element remains 1.

I hope I can avoid this:

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

Solution

Dart’s animation API directly ports the Web Animations API so anything you can do with it, you can do in Dart in almost exactly the same way. With WAAPI, creating animations always involves two parts: specifying the keyframes (a.k.a. the effect) and then timing parameters (or just the duration, if no specific timing effect is needed).

Among the timing parameters, there is one referred to as the fill mode which affects how the element is rendered when the animation isn’t actively running. To have the element remain in the state defined by the end of the animation after it has finished, all you need to do is set the fill parameter to forwards.

Just like with WAAPI in Javascript, in Dart, the animation timing parameters are set in the 2nd parameter of the animate method, with a Map in lieu of just a duration. This is also where you set things like delay, easing, and animation direction.

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

Here’s a working example.

You can also construct animations on an element before you want it to run. The .animate method returns an Animation object you can store and control the animation from. You can create it, call .pause on it immediately, and then play it later, among other things. This is all still in total parity with WAAPI.

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

Dart’s documentation of the animations API is definitely scant, but since it’s effectively identical to WAAPI (and it’s built on it, after all), all you need to do look at its docs on MDN, and from there, translating to Dart’s implementation is pretty trivial.

Answered By – ABabin

Answer Checked By – Clifford M. (FlutterFixes Volunteer)