MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    CSS show/hidden module animated

    Scheduled Pinned Locked Moved Development
    13 Posts 2 Posters 4.3k Views 2 Watching
    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.
    • S Offline
      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() {
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

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

        And how to change this function property in other transition ?

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

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

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • saljokeS Offline
            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 Offline
              sdetweil @saljoke
              last edited by

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

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              saljokeS 1 Reply Last reply Reply Quote 0
              • saljokeS Offline
                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 Offline
                  sdetweil @saljoke
                  last edited by

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

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • saljokeS Offline
                    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
                    • saljokeS Offline
                      saljoke
                      last edited by

                      alt text

                      A little preview…

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

                        @saljoke see nothing

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        saljokeS 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 Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy