[module.show] Not animated instantly shown


  • Module Developer

    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.


  • Module Developer

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



  • @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


  • Module Developer

    @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)


  • Module Developer

    Note: I tested it with electron and firefox



  • 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.


  • Module Developer

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



  • 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.


  • Module Developer

    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


  • Module Developer

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


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.