[module.show] Not animated instantly shown

tosti007

When calling the show function from a module it doesn’t use it’s animation, no matter the animation time. I am using windows and just did a clean pull to make sure it wasn’t the fault of a module I was making.
To test this I made a very simple module, code:

Module.register("TestHideShow", {
    notificationReceived: function (notification, payload, sender) {
        if (notification === "TEST_HIDE") {
            MM.getModules().enumerate(function (module) {
                module.hide(10000);
            });
        }

        if (notification === "TEST_SHOW") {
            MM.getModules().enumerate(function (module) {
                module.show(10000);
            });
        }
    }
});

All it does is hide all modules when a notification is recieved.
Then I copied the sample config, removed both weather modules and added:

{
    module: "MMM-ModuleScheduler",
    config: {
        notification_schedule: [
            {notification: "TEST_HIDE", schedule: "3 * * * *", payload: "a"},
            {notification: "TEST_SHOW", schedule: "4 * * * *", payload: "b"}
        ]
    }
},
{
    module: "TestHideShow"
},

I used the ModuleScheduler to send 2 notifications, with one minute in between.
For the hide animation everything works as expected, a very slow fade out (10sec). Then after one minute you would expect a very slow fade in (also 10sec), but it just pops onto the screen as if the duration was 0. I also checked the log and it didn’t do anything unusual.

Is anyone able to recreate this/does anyone encountered the same issue?

Note: I came across this while making a different module, so it’s not because of this testing module only.

tosti007

I tested this with the remote controll module aswell and experienced the same result.

strawberry 3.141

@tosti007 the core adds this style property to the wrapper moduleWrapper.style.transition = "opacity " + speed / 1000 + "s"; when the hide function is called, inspect the elements in your browser and see if this shows your 10 seconds

tosti007

@strawberry-3.141 Checked it, what happened was that this transition style was added as expected. However what I did notice was that the container within a region also changed it’s display value. When hiding it was set to display: none; after the animation. When showing a module it was set to display: block; and right when that happens the module is visible without animation (eventhough the module’s container did change transition value)

tosti007

Note: I tested it with electron and firefox

TheBogueRat

I’ve been fighting with this as well. @tosti007 I noticed the same thing in the inspector. Still looking for a solution but digging into the guts of this thing is time consuming… I appreciate the test results, that saved me some time chasing ghosts.

// Show the desire modules
var showModules = MM.getModules().withClass(page);
for (i = 0; i < showModules.length; i += 1) {
    showModules[i].show(this.config.fadeTime);
}

If I figure it out I’ll post an update. I just wanted to let someone know that I’m experiencing the same issue.

tosti007

@TheBogueRat yea indeed it takes quite a while, let me know if you find anything! I hope you do

TheBogueRat

I’ve found that if I have multiple iFrames in one position, i.e. ‘top_left’ and fade one out completely then start the fade in on the next one, I get the fade in/out to work properly which is my desired outcome.

If I have single iFrames in the left and center and try to fade one out and the other in, it always pops in. That needs to be fixed but I couldn’t identify a cause.

Cato

I noticed that animations works if you have at least one other visible module inside the region.

I think the problem is in the function updateWrapperState (main.js) that will change the region wrapper’s style to “none” if no module inside the same region has a style.position of “fixed”.

I’ve just added a PR that hopefully fixes this issue: https://github.com/MichMich/MagicMirror/pull/744

Cato

Just want to notify you that this issue has been solved in the latest commit in the develop-branch.