.main-page {
width: 100%;
height: 100%;
background: #fff;
.box-container {
width: 74px;
height: 38px;
background: #333;
border-radius: 18px;
padding: 1px;
box-sizing: border-box;
transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
cursor: pointer;
.circle1 {
position: relative;
width: 36px;
height: 36px;
border-radius: 18px;
font-weight: 600;
font-size: 18px;
background: #fff;
text-align: center;
line-height: 36px;
color: #333;
transform: translateX(0px);
transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
}
.circle2 {
position: relative;
width: 36px;
height: 36px;
border-radius: 18px;
font-weight: 600;
font-size: 18px;
background: #fff;
text-align: center;
line-height: 36px;
color: #00a1d6;
transform: translateX(36px);
transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
}
&.active {
background: #00a1d6;
}
}
}
<div class="main-page">
<div @click="show = !show" :class="`box-container ${show ? 'active' : ''}`">
<div :class="{ circle1: !show, circle2: show }">
弹
</div>
</div>
</div>
export default {
data() {
return {
show: false,
};
},
created() {},
mounted() {},
methods: {},
};