Timeline reverse, then play briefly causes wrong style

[Clindbergh]

Describe the bug
When starting a timeline, then reversing it after it played and playing it again, a wrong style is applied for a brief period.

To Reproduce
Steps to reproduce the behavior:

let inTimeline = anime.timeline({
  autoplay: false
});

inTimeline
  .add({
    targets: ".a1",
    opacity: [0, 1],
    duration: 200,
    easing: "linear"
  })
  .add({
    targets: ".a2",
    opacity: [0, 1],
    delay: anime.stagger(100),
    ease: "inOutElastic"
  });

document.getElementById("trigger").addEventListener(
  "click",
  function(e) {
    inTimeline.play();
    inTimeline.finished.then(() => {
      inTimeline.reverse();
    });
  },
  false
);

1. Click #trigger
2. Wait until the animation is finished
3. Click #trigger again

Result: For a short time .a1 and .a2 will have opacity 0, before having opacity 1 again and the fade out effect starts.

Expected behavior
Opacity stays at 1.

Additional context
Perhaps related: #373

Reason:

• After inTimeline is finished the first time, inTimeline.reverse() is called. This causes inTimeline and all its children to have the reversed = true (index.js:925). Notice that for both inTimeline and its children completed is true.
• When inTimeline.play() is called the second time, inTimeline and all its children are reset (index.js:1123), because completed was true. This causes the initial styles (opacity = 0) to be applied (index.js:1096).

Most likely toggleInstanceDirection() is incompletely handling the change. Intuitively completed and began should be set correctly, e.g. when completed was true, it should become false and began should also become false. However I am not currently aware of all side effects and other things to consider.

[williambout]

I can repro as well

[hunterpollpeter]

Experiencing this issue as well.

[kn0wn]

Should be fixed in 3.2.0