CSS微动画 - 开关按钮也要美美的

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>

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！