Vue 制作一个优雅的Switch

效果图

点击switch，仔细观察它的过渡变化，它主要在元素中使用了background 、margin-left 等属性的transition动画，下面是它的实现代码：

<template>
  <div class="switch"
       @click="toggleValue"
       :class="{selected:value}">
    <div class="wrapper">
      <div class="bullet"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: false
    }
  },
  methods: {
    toggleValue () {
      this.value = !this.value;
    }
  },
}
</script>

<style scoped>
.switch {
  margin: 50px;
  display: inline-block;
  user-select: none;
}
.switch:active .bullet {
  transform: scale(0.8);
}
.wrapper {
  width: 32px;
  height: 16px;
  border-radius: 8px;
  background: #e0f8ed;
  transition: background 0.3s;
  padding: 1px;
  box-sizing: border-box;
}
.bullet {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2c3e50;
  transition: margin-left 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.selected > .wrapper {
  background: #42b983;
}
.selected > .wrapper > .bullet {
  margin-left: 16px;
  background: #fff;
}
</style>

祝你学习愉快！