• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 3.9k 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 Apr 30, 2019, 9:22 PM

    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
    • S Offline
      saljoke
      last edited by May 1, 2019, 9:01 AM

      And how to change this function property in other transition ?

      S 1 Reply Last reply May 1, 2019, 11:38 AM Reply Quote 0
      • S Offline
        sdetweil @saljoke
        last edited by May 1, 2019, 11:38 AM

        @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
        • S Offline
          saljoke
          last edited by May 1, 2019, 1:54 PM

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

          S 1 Reply Last reply May 1, 2019, 2:02 PM Reply Quote 0
          • S Offline
            sdetweil @saljoke
            last edited by May 1, 2019, 2:02 PM

            @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

            S 1 Reply Last reply May 1, 2019, 4:56 PM Reply Quote 0
            • S Offline
              saljoke @sdetweil
              last edited by May 1, 2019, 4:56 PM

              @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 May 1, 2019, 6:11 PM Reply Quote 0
              • S Offline
                sdetweil @saljoke
                last edited by May 1, 2019, 6:11 PM

                @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
                • S Offline
                  saljoke
                  last edited by May 2, 2019, 10:59 AM

                  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
                  • S Offline
                    saljoke
                    last edited by May 2, 2019, 2:00 PM

                    alt text

                    A little preview…

                    S 1 Reply Last reply May 2, 2019, 2:02 PM Reply Quote 0
                    • S Offline
                      sdetweil @saljoke
                      last edited by May 2, 2019, 2:02 PM

                      @saljoke see nothing

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      S 1 Reply Last reply May 2, 2019, 2:03 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        6/13
                        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