• 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.6k 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
    saljoke
    last edited by Apr 30, 2019, 6:19 PM

    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 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
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        1/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