效果圖
點(diǎn)擊switch，仔細(xì)觀察它的過渡變化弥激，它主要在元素中使用了background 进陡、margin-left 等屬性的transition動(dòng)畫，下面是它的實(shí)現(xiàn)代碼：
<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>
祝你學(xué)習(xí)愉快微服！
