css 单击切换按钮时淡入浅色模式?

1sbrub3j  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(185)

在这个页面的左上角,我有一个“亮/暗模式”切换。当“亮模式”被点击,它很好地淡入到暗模式没有问题。但是一旦它在暗模式,你点击“亮模式”,它不淡入很好,我似乎不能让它工作。我需要添加什么到我的代码,让它很好地淡入到亮模式?

<!DOCTYPE html>
<html id= "mode" lang="en-au">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title> Test </title>
<head>
<link rel = "icon" type = "image/png" href = "https://ibb.co/bRc1Qqq">

<link rel = "apple-touch-icon" type = "image/png" href = "https://ibb.co/bRc1Qqq"/>
<!-- Square Windows tiles -->
<meta name="msapplication-square70x70logo" content="https://ibb.co/bRc1Qqq"></meta>
<meta name="msapplication-square150x150logo" content="https://ibb.co/bRc1Qqq"></meta>
<meta name="msapplication-square310x310logo" content="https://ibb.co/bRc1Qqq"></meta>
<!-- Rectangular Windows tile -->
<meta name="msapplication-wide310x150logo" content="https://ibb.co/bRc1Qqq"></meta>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gugi|Raleway|Abril+Fatface|Unica+One|Press+Start+2P|Bungee">

 

<!-- Makes stuff fadein on pageload-->
<script>
  window.onload = function()
  {document.body.className += " loaded";
  document.querySelector("body").style.opacity = 1;
  }
  </script>


<style>
html {
  height: 100%;
  background-color:#b8b8b8;
}

body {
  text-decoration: none;
  font-family: "Raleway";
  border-radius: 7px;
  /* color-scheme: light dark; */

}

h1, ul {
  padding-top: 5%;
}

body, .fadein {
  opacity: 0;
  -moz-transition: opacity 3s;
  -webkit-transition: opacity 3s;
  -o-transition: opacity 3s;
  transition: opacity 3;
}

body.loaded .fadein {
  opacity:  1;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header h1 {
  margin: 0;
}

.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  
}

.tabs li {
  flex-grow: 1;
  text-align: center;
  padding: 0.5%;
  
}

.tabs a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
  border-radius: 7px;
}

.tabs a:hover,
.tabs a.active {
  background-color: #ddd;
}

.main {
  padding: 20px;
}

/* Hides all sections by default 
.section {
  display: none;
}
*/

.section.active {
  display: block;
}

.dark-mode {
  background-color: #020C17;
  color: #ffffff;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

.dark-mode ul a{
  background-color: #020C17;
  color: #ffffff;
}

.dark-mode ul a:hover,
.dark-mode ul a.active {
  background-color: #081334;
  color: #ddd;
  
}

#dark-mode-button {
  color: #ddd;
  padding: 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
  position: fixed; 
}

</style>

<!-- makes scrolling smooth when using anchor -->
<script> 
  document.querySelector('a').addEventListener('click', function(e) {
    e.preventDefault();
    var target = document.querySelector(this.getAttribute('href'));
    var offset = target.offsetTop;
    window.scrollTo({
      top: offset,
      behavior: 'smooth'
    });
  });
</script>

<!-- The HTML for the website -->
<body> 
  <div id="dark-mode-button"><p id="mango" class="btn-toggle">Dark mode</p></div>
<div class="fadein">
<div class="container">
    <!-- The header with the title and tabs -->
    <div class="header">
        
      <h1>Testing</h1>
      <ul class="tabs">
        <li><a href="#section1" >About</a></li>
        <li><a href="#section2">Projects</a></li>
        <li><a href="#section3">Test</a></li>
      </ul>
    </div>
    <!-- The main content of the website, with the sections -->
    <div class="main">
      <div id="section1">
        <h2>About</h2>
        <p>This is the content of section 1.</p>      
  
      </div>
      <div class="section" id="section2">
        <h2>Projects</h2>
        <p>This is the content of section 2.</p>
      </div>
      <div class="section" id="section3">
        <h2>Test</h2>
        <p>This is the content of section 3.</p>
      </div>

      
    </div>
  </div>
</div>
</body>
  

<script>
  // Get the elements for the tabs and sections
const tabs = document.querySelectorAll('.tabs a');
const sections = document.querySelectorAll('.section');

// Add a click event listener to each tab
tabs.forEach(tab => {
tab.addEventListener('click', event => {
  event.preventDefault(); // prevent the default link behavior
  // Remove the active class from all tabs and sections
  tabs.forEach(tab => tab.classList.remove('active'));
  sections.forEach(section => section.classList.remove('active'));
  // Add the active class to the clicked tab and corresponding section
  tab.classList.add('active');
  document.querySelector(tab.getAttribute('href')).classList.add('active');
});
});

</script>

<!-- JavaScript code to handle the button click and switch between modes. also uses button id and the body element -->
<script>
  // Get the button and add a click event listener to it
  const button = document.getElementById('dark-mode-button');
  button.addEventListener('click', () => {
    // Get the current body element and toggle the "dark-mode" class
    const body = document.getElementById("mode");
    body.classList.toggle('dark-mode');

  });
</script>

<script>
/* Fetch the buttom element */
const mode = document.getElementById('mango');
/* Add click event listener where we will provide logic that updates the button text */
mode.addEventListener('click', function() {
  /* Update the text of the button to toggle beween "More" and "Less" when clicked */
  if(mode.innerText.toLowerCase() === 'dark mode') {
    mode.innerText = 'Light mode';
  }
  else {
    mode.innerText = 'Dark mode';
  }
});

</script>
juzqafwq

juzqafwq1#

你需要把tranition效果应用到受黑暗主题影响的元素上,而不是dark-mode类本身,不过你对#dark-mode-button做得很好。
您的代码的解决方案:在html{}.tabs a {}上添加一个过渡(transition: all 0.5s ease-in-out),您可以移除dark-mode类上的transition效果。Fiddle:https://jsfiddle.net/40y5axcd/
注意:你在整个html中使用了白色的文本颜色,所以你的main内容文本在白色背景下是不可见的,我没有改变,因为它不是你问题的一部分。
接下来,你最好使用一个带有transition效果的实用类,并将其应用于所有受暗模式影响的元素,特别是如果你继续向页面添加元素,并希望更改过渡持续时间。你宁愿只更改一个类,然后必须遍历每个元素并更改持续时间。

相关问题