vue3+ts+less-按钮切换动画

<template>
	<div class="toggleEle" @click="toggleHandler">
		<span></span>
		<span></span>
		<span></span>
	</div>
</template>
<script setup lang="ts">
	const toggleHandler = () => {
		const toggleEle = document.querySelector('.toggleEle')
		toggleEle?.classList.toggle('active')
	}
</script>
<style lang="less" scoped>
	.toggleEle {
		width: 70px;
		height: 70px;
		box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		margin: 200px auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
		span {
			position: absolute;
			width: 40px;
			height: 4px;
			background-color: #1863ff;
			border-radius: 4px;
			transition: all 0.5s;
			left: 15px;
		}
		span:nth-child(1) {
			transform: translateY(-15px);
			width: 25px;
		}
		span:nth-child(3) {
			transform: translateY(15px);
			width: 15px;
		}
		&.active {
			span:nth-child(1) {
				transform: translateY(0) rotate(45deg);
				width: 40px;
			}
			span:nth-child(2) {
				transform: translateX(60px);
			}
			span:nth-child(3) {
				transform: translateY(0) rotate(315deg);
				width: 40px;
			}
		}
	}
</style>