[module.show] Not animated instantly shown

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