[Feature Request] Adding slow fade-out

[Katazui]

Hello, fellow Magic Mirror users!

Is your feature request related to a problem? Please describe.

Feature for mode: 'positional'

The slideTransitionSpeed works only when the module is fading-in with this line of code: this[i].show(this.slideTransitionSpeed, { lockString: "mmmc" });. However, the slideTransitionSpeed seem to not work when fading out, i.e this[i].hide(0, { lockString: "mmmc" });. Hence, the module doesn't exactly look like it's fading in and out between modules, because the behavior is a quickly cut transition into fade-in.

Describe the solution you'd like

The intended behavior is to have the modules using the slideTransitionSpeed time to exit (fade-out) and enter (fade-in) between modules.

Describe alternatives you've considered

I sorta found a little solution to this by modifying both this[i].hide(0, { lockString: "mmmc" }); to this[i].hide(this.slideTransitionSpeed, { lockString: "mmmc" });. However, the problem here is that the next module is introduced during the process of the fade-out time of the previous module, resulting in an overlapping carousel, but the problem for introducing fade-out times is fixed. (Line 395).

    // The module is not in this slide.
    if (!show) {
      this[i].hide(this.slideTransitionSpeed, { lockString: "mmmc" });
    }
  } else {
    // We aren't using slides and this module shouldn't be shown.
    this[i].hide(this.slideTransitionSpeed, { lockString: "mmmc" });
  }

Video of behavior: https://ufile.io/pset7qni

Additional context

I was thinking about a solution where an empty transparent module is passed between every other module so that way the fade-in and fade-out process can be fully completed before the next module is passed, but I wasn't sure about how to proceed with that idea.

[petero-dk]

Implementing this is quite simple.

In order to fix this, two things must happen, one implement the fadeout (you did that) time the fade-in and fade-out appropriately.

In order to get the timing of it all to fit, I decided to make all fade animations half of the slideTransitionSpeed that way the total transition will be slideTransitionSpeed.

Since we will be calling setTimout we need a few local variables that can transition scopes. First we add the following line on line 340:

    var self = this

Then we replace all this[i].show(... with:

        var i_temp = i
        setTimeout(function() {
          self[i_temp].show(self.slideTransitionSpeed / 2, { lockString: "mmmc" });
        }, this.slideTransitionSpeed / 2);

and finally replace this[i].hide(0,... with:

this[i].hide(this.slideTransitionSpeed / 2, { lockString: "mmmc" });

[shbatm]

@petero-dk, please submit a PR with the proposed changes and I'll review and merge it when I get a chance.