iOS開關效果

定義變量：

<style scoped lang="scss">.layout {// 按鈕寬度$button-width: 500px;//  按鈕高度$button-height: 250px;//  按鈕里面圓形直徑$circle-diameter: 200px;//  按鈕背景與里面圓形間距$button-circle-offset:calc(($button-height - $circle-diameter) / 2);//  里面圓形陰影大小$circle-shadow-size: 10px;//  里面圓形在長按情況下的寬度$circle-wider-size: 350px;//  淺灰色$light-gray: #e0e0e0;//  深灰色$dark-gray: #616161;//  綠色$green: #4caf50;}
</style>

繪制按鈕圖形：

<template><div class="layout"><div class="button"></div></div>
</template><style scoped lang="scss">
.layout {// 上面👆定義的變量display: flex;justify-content: center;align-items: center;min-height: 100vh;.button{width: $button-width;height: $button-height;background: $light-gray;border-radius:calc($button-width / 2);}
}
</style>

里面的圓形使用偽類選擇器

&:after{content: '';display: block;width: $circle-diameter;height: $circle-diameter;border-radius: $circle-diameter;background-color: #fff;
}

給元素添加上定位讓圓形固定到指定位置：

  .button{// ...其他效果;position: relative;&:after{// ...其他效果;position: absolute;top:$button-circle-offset;transform: translateX($button-circle-offset); // 為了后面方便做動畫,所以使用translateX
box-shadow:$button-circle-offset 0 calc($circle-shadow-size * 4) $dark-gray ;}}

處理點擊效果：

<template>
<div class="layout"><div class="button" @click="clickBtn" :class="{ 'btnClick': isActive }" ></div></div>
</template><script setup lang="ts">import {ref} from "vue";const isActive = ref(false)const clickBtn = () => {isActive.value = !isActive.value}
</script><style scoped lang="scss">.btnClick {background: $green;&:after{transform: translateX( calc( $button-width - $circle-diameter - $button-circle-offset ) );box-shadow: calc( $button-circle-offset * -1 ) 0 calc($circle-shadow-size * 4) $dark-gray ;}}
</style>

加入transition動畫：

.button{transition:.3s all ease-in-out;&:after{transition:.3s all ease-in-out;}
}

接下來處理長按效果：

.button{&:active:after{width: $circle-wider-size;}
}
.btnClick {&:active:after{transform: translateX( calc( $button-width - $circle-wider-size - $button-circle-offset ) );}
}

這樣按鈕效果就實現啦🎉

完整代碼：

<template><div class="layout"><div class="button" @click="clickBtn" :class="{ 'btnClick': isActive }" ></div></div>
</template><script setup lang="ts">
import {ref} from "vue";
const isActive = ref(false)const clickBtn = () => {isActive.value = !isActive.value
}
</script><style scoped lang="scss">
.layout {// 按鈕寬度$button-width: 500px;//  按鈕高度$button-height: 250px;//  按鈕里面圓形直徑$circle-diameter: 200px;//  按鈕背景與里面圓形間距$button-circle-offset:calc(($button-height - $circle-diameter) / 2);//  里面圓形陰影大小$circle-shadow-size: 10px;//  里面圓形在長按情況下的寬度$circle-wider-size: 350px;//  淺灰色$light-gray: #e0e0e0;//  深灰色$dark-gray: rgba(97, 97, 97, 0.34);//  綠色$green: #71d575;display: flex;justify-content: center;align-items: center;min-height: 100vh;.button{width: $button-width;height: $button-height;background: $light-gray;border-radius:calc($button-width / 2);position: relative;transition:.3s all ease-in-out;&:after{content: '';display: block;width: $circle-diameter;height: $circle-diameter;border-radius: $circle-diameter;background-color: #fff;position: absolute;top:$button-circle-offset;transform: translateX($button-circle-offset); // 為了后面方便做動畫,所以使用translateXbox-shadow:$button-circle-offset 0 calc($circle-shadow-size * 4) $dark-gray ;transition:.3s all ease-in-out;}&:active:after{width: $circle-wider-size;}}.btnClick {background: $green;&:after{transform: translateX( calc( $button-width - $circle-diameter - $button-circle-offset ) );box-shadow: calc( $button-circle-offset * -1 ) 0 calc($circle-shadow-size * 4) $dark-gray ;}&:active:after{transform: translateX( calc( $button-width - $circle-wider-size - $button-circle-offset ) );}}
}
</style>