jquery - 如何在条件查询中的类之间淡入淡出

Question

我正在尝试找出如何在条件按钮单击触发的 css 类之间淡入淡出。而不是简单的上课和下课。

我从这个 answer 改编了下面的 jsfiddle至 this ;大部分工作，除了淡入淡出。

     // Check if localStorage is supported
    if ('localStorage' in window && typeof localStorage == 'object') {
      $(document).ready(function() {

        // Set the class if greyscale is set
        // Note that localStorage saves everything as strings
        if (localStorage["darkmode"] == "1") {
          $('html').addClass('dark');
          $('.daytime').addClass('nighttime').removeClass('daytime');
          $("#lightson").val("Turn Lights back on");
        }
        // Register click listener for the button
        $('#lightson').click(function() {
          // Toggle greyscale on and off
          if (localStorage["darkmode"] != "1") {
            $('html').addClass('dark').removeClass('light').fadeIn("fast");
            localStorage["darkmode"] = "1";
            $('.daytime').addClass('nighttime').removeClass('daytime');
            $("#lightson").val("Turn Lights back on");
          } else {
            $('html').removeClass('dark').addClass('light').fadeIn("fast");
            localStorage["darkmode"] = "0";
            $('.nighttime').addClass('daytime').removeClass('nighttime');
            $("#lightson").val("Dark Mode");
          }
        }); // - button click
      }); // - doc ready
    }

html.light {
  background: white;
  color: grey;
}
html.dark {
  background: grey;
  color: white;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas libero lectus, ac elementum est euismod sit amet. Sed maximus ac ipsum non pulvinar. Nulla tempor turpis a metus sollicitudin, in interdum dui mollis. Curabitur dictum magna magna,
  sit amet tempus justo consequat sit amet. Vestibulum varius nisl justo, vel egestas justo scelerisque sit amet. Duis vulputate lacinia lacus id lacinia. Sed vel tellus id nulla finibus pellentesque vel eu sapien. Praesent risus eros, pellentesque in
  tempor a, vestibulum sit amet purus. Mauris sapien velit, varius nec ex eget, vestibulum laoreet diam. Nam eros nisi, euismod ultrices viverra eu, dictum quis nisl. Suspendisse quis eleifend quam. Curabitur consectetur diam non ante rutrum, tincidunt
  placerat felis tincidunt. Fusce vitae dolor dui. Morbi mattis eu dui sit amet laoreet.</div>
<input type="button" id="lightson" class="daytime" value="Dark Mode">

你可以看到暗到亮之间的过渡很刺耳，我想在它们之间以某种方式淡化。我尝试将:.fadeIn("fast"); 附加到上述 jsfiddle 语句中的两个“add 和 removeClass”行，如下所示:$('html').addClass('dark ').removeClass('light').fadeIn("fast");

然而，这似乎根本没有做任何事情，而且可能是有充分理由的

我无法使用样式表中的纯 css 解决问题，因为我不希望每次加载页面时都在按下按钮时淡入淡出。

Answer 1

jQuery 中的“淡入”方法为隐藏元素的不透明度设置动画，而不是在类之间设置动画。

您是否考虑过使用 css 转换？

html {
    background:white;
    color:grey;
    transition: all 0.4s
}
html.dark {
    background: grey;
    color: white;
}

那么您唯一需要的 javascript 就是切换 html 元素上的“深色”类。

加载页面时淡入淡出的原因是在您的原始代码中，您在页面加载后应用了“深色”类，这会触发动画。如果在设置初始样式之前确保 HTML 标记没有“过渡”属性，则可以避免这种不需​​要的动画。

Here's an example使用您的原始代码。注意额外的行:

document.createElement('div').offsetHeight;

这是必需的，因为某些浏览器不会立即应用样式更改，因为它们会尝试通过排队更改来优化重新绘制布局的次数，直到它们必须这样做。此 hack 会强制浏览器立即应用您的样式，因为它必须确保为您提供正确的值。