Acabo de comenzar con el front-end, quiero implementar una animación en modo oscuro.
Cuando haces clic en el interruptor (una cuerda), la página cambiará de tema.
pero no sé cómo agregar la animación usando js como el enlace de clase de vue.
@keyframes line { 0% { transform: translateY(0); } 50% { transform: translateY(100px); } 100% { transform: translateY(0); } } .pull { animation: line 0.5s; }así en vue (lo encontré en línea)
<div class="switch" :class="{ 'pull': inAnimation }" @animationend="animationEnd" @click="changeTheme" />Este es mi código.
No sé cómo usar js para completarlo.
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();Primero, veo que te pierdes la identificación del elemento porque estás usando getElementById , tiene que ser así:
<div id="switch" <!-- this is missing --> class="switch" :class="{ 'pull': inAnimation }" @animationend="animationEnd" @click="changeTheme" />Luego, según el uso de Vue o no. (Si es Vue, configure el código en el mismo componente que en el elemento anterior).
vista
<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>si vainilla 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(); }