如何在js中实现类绑定
如何在js中实现类绑定
提问于 2021-11-04 06:28:39
我刚开始前端，想要实现一个黑暗模式的动画.
当您单击开关(绳子)时，页面将更改主题。
但是我不知道如何使用js来添加动画，比如vue的类绑定。
@keyframes line {
0% {
transform: translateY(0);
}
50% {
transform: translateY(100px);
}
100% {
transform: translateY(0);
}
}
.pull {
animation: line 0.5s;
}就像这个在vue(我在网上找到的)
<div
class="switch"
:class="{ 'pull': inAnimation }"
@animationend="animationEnd"
@click="changeTheme"
/>这是我的密码。
我不知道如何用js来完成它。
const sw = document.getElementById('switch');
const changeTheme = () => {
sw.addEventListener("click", () => {
sw.className = 'pull';
if (document.body.className !== "dark") {
document.body.classList.add("dark");
localStorage.setItem("css", "dark");
} else {
document.body.classList.remove("dark");
localStorage.removeItem("css");
}
sw.className = '';
});
if (localStorage.getItem("css")) {
document.body.className = "dark";
document.body.classList.add("dark");
}
};
changeTheme();回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-04 07:30:00
首先，我看到您忽略了id元素，因为您使用的是getElementById，它必须如下所示：
<div
id="switch" <!-- this is missing -->
class="switch"
:class="{ 'pull': inAnimation }"
@animationend="animationEnd"
@click="changeTheme"
/>然后，基于是否使用Vue。(如果是Vue，请将代码设置在与上面元素相同的组件中)。
Vue
<script>
export default {
mounted() {
const sw = document.getElementById('switch');
sw.addEventListener("click", () => {
sw.classList.add('pull');
if (!document.body.classList.contains("dark")) {
document.body.classList.add("dark");
localStorage.setItem("css", "dark");
} else {
document.body.classList.remove("dark");
localStorage.removeItem("css");
}
setTimeout(() => {
sw.classList.remove("pull")
}, 600);
});
if (localStorage.getItem("css")) {
document.body.classList.add("dark");
}
}
}
</script>如果Vanilla Js
const sw = document.getElementById("switch");
if (sw) {
const changeTheme = () => {
sw.addEventListener("click", () => {
sw.classList.add("pull");
if (!document.body.classList.contains("dark")) {
document.body.classList.add("dark");
localStorage.setItem("css", "dark");
} else {
document.body.classList.remove("dark");
localStorage.removeItem("css");
}
setTimeout(() => {
sw.classList.remove("pull");
}, 600);
});
if (localStorage.getItem("css")) {
document.body.classList.add("dark");
}
};
changeTheme();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69835185
复制相关文章
相似问题
腾讯云开发者
