原生switch选择器（vue组件）

选择器
1.图片如下，有从左往右运动效果哦。

2.部分细节讲解：
2.1 大div包小 绝对定位
父元素圆角：
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
子元素圆角：border-radius:50%
2.2运动：
animation: .5s back; 有从左往右的运动效果
animation-fill-mode : forwards 让子元素不会自动回来
2.3防止首次进入页面子元素运动
this.$refs.son.style.animation = ‘none’
建议直接放到项目中试用
代码如下

<template>
  <div class='fat' @click="taggle" @click.once="rmstyle" :class="{fatopen:isClo,fatclose:!isClo}">
    <div ref="son" class="son" :class="{open:isClo,sonclose:!isClo}"></div>
  </div>
</template>
<script>
export default{
    data () {
        return {
          isClo: false
        }
    },
    methods: {
      taggle() {
        this.isClo = !this.isClo;
        this.$emit('isshow',this.isClo);
      },
      rmstyle() {
        this.$refs.son.style.animation = ''
      }
    },
    props:['isshow'],
    mounted(){
      this.$refs.son.style.animation = 'none'
    }
}
</script>
<style lang='scss' scoped>
.fat{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  background: #2e3333;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  .son{
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #f7f4f5;
    border-radius: 50%;
  }
}
.fatopen{
  background: #19d419;
}
.fatclose{
  background: #2e333385;
}
.open{
  animation: .5s move;
  animation-fill-mode : forwards 
}
.sonclose{
  animation: .5s back;
  animation-fill-mode : forwards
}
@keyframes move{
  0%{
    left: 2px;
    top: 0px;
  }
  100%{
    left: 28px;
    top: 0px;
  }
}
@keyframes back{
  0%{
    left: 28px;
    top: 0px;
  }
  100%{
    left: 2px;
    top: 0px;
  }
}  
</style>