这里有几种不同的方法可以让您在切换样式时保持过渡效果。要记住的基本事项是，您必须有一个可用的转换规则才能进行转换。如果您拥有一种风格而不是另一种风格，那么只有在您更改为拥有它的风格时才会发生这种情况，因为否则没有规则说需要进行过渡。
<link>交换方法
基本上，确保过渡规则始终可用。如果它们在您的夜间/日间样式表中而不是其他样式表中，则不再有过渡规则。这就是为什么它只会在你淡入时起作用。
但理想情况下，您可能希望将两组规则放在一个文件中，然后使用 <body> 标记上的类在活动样式之间进行更改。但是，在某些用例中，您可能仍希望使用两个不同时加载的单独样式表。例如，可能并非所有用户都使用的高对比度样式表会浪费内存。但是，如果我想组合它们，我仍然可能会使用 <body> 标记上的 class 属性。
index.html
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="base.css">
<script src="index.js"></script>
</head>
<body>
<main>
<h1>Hello!</h1>
<p>I am text</p>
<ul>
<li>
<button id="day_mode">Day</button>
</li>
<li>
<button id="night_mode">Night</button>
</li>
</ul>
</main>
</body>
</html>
index.js
/*jslint browser:true*/
(function () {
"use strict";
function addStylesheet(name, loc) {
var sheet = document.createElement("link");
sheet.id = name;
sheet.href = loc;
sheet.rel = "stylesheet";
sheet.type = "text/css";
document.head.appendChild(sheet);
return sheet;
}
function removeStylesheet(sheet) {
sheet.parentNode.removeChild(sheet);
//document.getElementById(name).removeChild();
}
function go() {
var dayButton = document.getElementById("day_mode"),
nightButton = document.getElementById("night_mode"),
daySheet,
nightSheet;
dayButton.addEventListener("click", function (e) {
e.preventDefault();
if (!daySheet) {
if (nightSheet) {
removeStylesheet(nightSheet);
nightSheet = null;
}
daySheet = addStylesheet("day", "day.css");
}
});
nightButton.addEventListener("click", function (e) {
e.preventDefault();
if (!nightSheet) {
if (daySheet) {
removeStylesheet(daySheet);
daySheet = null;
}
nightSheet = addStylesheet("night", "night.css");
}
});
}
document.addEventListener("DOMContentLoaded", go);
}());
base.css
h1 {
transition: color 1s;
}
p {
transition: background-color 1s, color 1s;
}
day.css
h1 {
color: orange;
}
p {
background-color: yellow;
color: red;
}
night.css
h1 {
color: blue;
}
p {
background-color: black;
color: blue;
}
<body> 类命名空间
如果您确实想尝试 <body> 类方法，这里有一个简短的实现，展示了如何做到这一点。
这样做的基础是，您为想要使用的 CSS 的每个版本（白天/晚上）都有一个 命名空间，并为这些模式规则添加相关命名空间的前缀。
然后，使用 JavaScript，您将使用 document.body.classList.add() 和 document.body.classList.remove() 从 <body> 标记中删除或添加命名空间类。
/*jslint browser:true*/
(function() {
"use strict";
function go() {
var dayButton = document.getElementById("day_mode"),
nightButton = document.getElementById("night_mode");
dayButton.addEventListener("click", function(e) {
e.preventDefault();
document.body.classList.remove("night");
document.body.classList.add("day");
});
nightButton.addEventListener("click", function(e) {
e.preventDefault();
document.body.classList.remove("day");
document.body.classList.add("night");
});
}
document.addEventListener("DOMContentLoaded", go);
}());
h1 {
transition: color 1s;
}
p {
transition: background-color 1s, color 1s;
}
body.day h1 {
color: orange;
}
body.day p {
background-color: yellow;
color: red;
}
body.night h1 {
color: blue;
}
body.night p {
background-color: black;
color: blue;
}
<html>
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="index2.css">
<script src="index2.js"></script>
</head>
<body class="day">
<main>
<h1>Hello!</h1>
<p>I am text</p>
<ul>
<li>
<button id="day_mode">Day</button>
</li>
<li>
<button id="night_mode">Night</button>
</li>
</ul>
</main>
</body>
</html>
备用样式表关系
要注意的另一件事是，如果您使用<link ... rel="stylesheet alternate" ...> 方法，转换也仍然有效。我不确定哪些浏览器仍然为用户提供手动切换其首选渲染样式的方法。 Chrome 不提供方法，但 FireFox 提供。请参阅下面的屏幕截图。
这是我用于 <head> 元素的标记。
<head>
<title>CSS Test</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="day.css" title="Day">
<link rel="stylesheet alternate" href="night.css" title="Night">
<script src="index.js"></script>
</head>