Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    CSS show/hidden module animated

    Development
    2
    13
    1701
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • saljoke
      saljoke last edited by

      Hello,
      I will try to change the transition animation fading when one module is showing then also when suspended.
      I try to animate with custom.css but it only function when using .region.left for example and only when the magicmirror is starting.
      I tried also with .resume() and I try to catch how to disable fade transition.
      Have you got any ideas?
      Thanks from Bea!

      1 Reply Last reply Reply Quote 0
      • S
        sdetweil last edited by

        this is hard coded in main.js

        var hideModule = function(module, speed, callback, options) {
        		options = options || {};
        
        		// set lockString if set in options.
        		if (options.lockString) {
        			// Log.log("Has lockstring: " + options.lockString);
        			if (module.lockStrings.indexOf(options.lockString) === -1) {
        				module.lockStrings.push(options.lockString);
        			}
        		}
        
        		var moduleWrapper = document.getElementById(module.identifier);
        		if (moduleWrapper !== null) {
        			moduleWrapper.style.transition = "opacity " + speed / 1000 + "s";
        			moduleWrapper.style.opacity = 0;
        
        			clearTimeout(module.showHideTimer);
        			module.showHideTimer = setTimeout(function() {
        
        1 Reply Last reply Reply Quote 0
        • saljoke
          saljoke last edited by

          And how to change this function property in other transition ?

          S 1 Reply Last reply Reply Quote 0
          • S
            sdetweil @saljoke last edited by

            @saljoke sorry, I don’t understand your question…

            1 Reply Last reply Reply Quote 0
            • saljoke
              saljoke last edited by

              How to add in custom.css to define this function and have another transition animation…

              S 1 Reply Last reply Reply Quote 0
              • S
                sdetweil @saljoke last edited by

                @saljoke I don’t know how to override what the code does

                saljoke 1 Reply Last reply Reply Quote 0
                • saljoke
                  saljoke @sdetweil last edited by

                  @sdetweil so I have to try to change it in js… And try to define this function in every modules

                  S 1 Reply Last reply Reply Quote 0
                  • S
                    sdetweil @saljoke last edited by

                    @saljoke sorry, i do not know… i do not understand what you wish to accomplish

                    1 Reply Last reply Reply Quote 0
                    • saljoke
                      saljoke last edited by

                      I solved it using the file CSS on MMM-SimpleLogo folder and solve partially the animation but I can’t control the fade property and can’t animated the suspended modules

                      1 Reply Last reply Reply Quote 0
                      • saljoke
                        saljoke last edited by

                        alt text

                        A little preview…

                        S 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy