效果图
点击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>
祝你学习愉快！
