如何在js中實作類系結

我剛開始前端，想實作一個暗模式影片。

當您單擊開關（繩索）時，頁面將更改主題。

但是我不知道如何通過使用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();

uj5u.com熱心網友回復：

首先，我看到你錯過了元素的 id 因為你正在使用getElementById，它必須是這樣的：

<div
  id="switch" <!-- this is missing -->
  class="switch"
  :class="{ 'pull': inAnimation }"
  @animationend="animationEnd"
  @click="changeTheme"
/>

然后，基于是否使用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>

如果香草 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();
}

uj5u.com熱心網友回復：

我也是初學者，不知道我的方法能不能滿足你。我更喜歡使用 v-bind 來系結元素的類。但是如果你堅持使用js，你可以使用例如：你有一個導航欄：

<ul id="nav" class="nav1">
  <li>.....</li>
  <button click="changeTheme"> change theme</button>
</ul>

你可以先寫下兩個主題：

<style>
    .nav1 {
      margin-top: 10%;
      width: 100px;
      height: 100%;
      margin: 0px;
      padding: 0px;
      background-color: black;
      position: fixed;
      transition :700ms;
    }
    .nav2{
      margin-top: 10%;
      width: 100px;
      height: 100%;
      margin: 0px;
      padding: 0px;
      background-color: white;
      position: fixed;
      transition:700ms;
    }
</style>

這些css是兩個主題的樣式，當影片不是那么復雜（比如在兩個主題之間切換）時，可以使用transition。并使用 js 來回應按鈕的事件并通過 id 更改類：

<script>    
  function changeTheme(){
    if(document.getElementById("nav").className=="nav1"){
      document.getElementById("nav").setAttribute('class','nav2');
    }
    else {document.getElementById("nav").setAttribute('class','nav1');
    }
  }
</script>

標籤：javascript Vue.js 班级 动画片

上一篇：如何將bash變數插入到cURL請求的JSON正文中？

下一篇：如何在Three.js中制作移動/滑動元素？