switch调函数 vue_Vue 制作一个优雅的Switch

效果图

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

@click="toggleValue"

:class="{selected:value}">

export default {

data () {

return {

value: false

}

},

methods: {

toggleValue () {

this.value = !this.value;

}

},

}

.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;

}

祝你学习愉快！