Q: 想要電腦上的開關按鈕看起來跟App上的一樣，可以嗎？
A: 想要什麼顏色的呢？

介紹完transition後，接下來這篇的實作案例會運用比較基礎的js針對元素添加及移除class，以實際狀況來說會是比較像是開關的按鈕，透過樣式設定及transition可以得到一個看起來流暢的開關按鈕。

先做出個開關按鈕

javascript的功能是當點擊內部的circle時，會尋找id為container的元素，如果原本沒有.is-active，會對此元素新增class；如果原本有.is-active，則將.is-active從該元素移除。

<script>
  function toggle() {
    document.getElementById('container').classList.toggle('is-active')
  }
</script>

<style>
  .container {
    box-sizing: border-box;
    width: 70px;
    height: 40px;
    padding: 2px;
    border-radius: 20px;
    background-color: #eee;
    border: 2px solid #ccc;
  }
  .circle {
    position: relative;
    width: 32px;
    height: 32px;
    background-color: #aaa;
    border-radius: 50%;
    margin-left: 0;
    cursor: pointer;
  }
  .is-active.container {
    background-color: Honeydew;
    border-color: SeaGreen;
  }
  .is-active .circle {
    background-color: DarkGreen;
    margin-left: calc(100% - 32px);
  }
</style>

<div id="container" class="container">
  <div class="circle" onclick="toggle()"></div>
</div>

上方的程式碼已經可以讓開關正常運作，當有.is-active時顯示開關開啟，沒有時則顯示關閉。再來只要對元素新增transition，這時候所有屬性包括background-color、border-color、margin-left都會從原本的值以0.3秒的速度漸變為.is-active的樣式。如果只想對其中一個屬性做漸變，那麼只要修改transition-property就可以了，如transition-property: margin;。

<style>
  .container,
  .circle  {
    transition: .3s;
  }
</style>

特別注意

這裡要注意的是transition要放的的位置是在沒有is-active的元素，如果將transition下在有.is-active的狀態時，那麼當移除.is-active後就不會有漸變的效果，會像一開始的開關按鈕一樣，margin是直接做改變的。

<style>
  .is-active.container,
  .is-active .circle {
    transition: all .3s;
  }
</style>

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！