所以我正在做一個改變網站主題的專案，我在*顏色和背景顏色的選擇器上添加了一個過渡，這樣它們就可以平滑地變化，但文本的顏色變化比正文的背景顏色慢！
const html = document.querySelector("html")
lightThemeButton = document.querySelector(".light-theme-button")
darkThemeButton = document.querySelector(".dark-theme-button")
lightThemeButton.addEventListener("click", () => {
html.style.colorScheme = "light"
})
darkThemeButton.addEventListener("click", () => {
html.style.colorScheme = "dark"
})*,
*::before,
*::after {
transition: background-color 250ms ease, color 250ms ease;
}
.container {
width: 100%;
max-width: 1000px;
margin: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<title>Transition</title>
</head>
<body>
<div class="container">
<section>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cum
quia assumenda similique in eveniet porro beatae hic? Saepe, earum?
</p>
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et
nostrum ab nesciunt iusto dolore inventore expedita eveniet ullam maxime
a excepturi blanditiis aliquid earum alias ex, saepe est modi.
</p>
<div class="theme-button-wraper">
<button class="light-theme-button">Light</button>
<button class="dark-theme-button">Dark</button>
</div>
</div>
</body>
</html>我也通過添加兩個具有自定義屬性的類來嘗試這個，--body-bg: #111但是文本轉換仍然比背景顏色的轉換慢
uj5u.com熱心網友回復：
考慮在 CSS 中使用更高特異性的替代方案，以創建更平滑的過渡。* (all) 選擇器非常適合定位頁面上的每個元素，但由于您的背景轉換發生在整個 HTML 檔案中，您需要先定位父級，這就是為什么您會看到只有幾毫秒的延遲。通過使用:root或 HTML 作為選擇器，您應該得到預期的結果。運行下面的代碼片段，看看是否能解決您的問題，希望對您有所幫助！
const html = document.querySelector("html")
lightThemeButton = document.querySelector(".light-theme-button")
darkThemeButton = document.querySelector(".dark-theme-button")
lightThemeButton.addEventListener("click", () => {
html.style.colorScheme = "light"
})
darkThemeButton.addEventListener("click", () => {
html.style.colorScheme = "dark"
}):root {
transition: all 0.25s ease-out;
}
.container {
width: 100%;
max-width: 1000px;
margin: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<title>Transition</title>
</head>
<body>
<div class="container">
<section>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cum
quia assumenda similique in eveniet porro beatae hic? Saepe, earum?
</p>
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et
nostrum ab nesciunt iusto dolore inventore expedita eveniet ullam maxime
a excepturi blanditiis aliquid earum alias ex, saepe est modi.
</p>
<div class="theme-button-wraper">
<button class="light-theme-button">Light</button>
<button class="dark-theme-button">Dark</button>
</div>
</div>
</body>
</html>附加檔案：https ://developer.mozilla.org/en-US/docs/Web/CSS/:root
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/485611.html
標籤：javascript html css 过渡