05——css3实现提交按钮动画

不讲那些虚头巴脑的开场白，直接看效果

<template>
	<view class="container">
		<button class="box" @click="submit" :disabled="isButtonDisabled">
			<view v-if="!isButtonDisabled" class="text">提交</view>
			<view v-if="isUpload" :class="{upload:isUpload}"></view>
			<view v-if="icon" class="box_state">✔</view>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isUpload: false,
				icon: false,
				isButtonDisabled: false,
			};
		},
		methods: {
			submit() {
				console.log('提交后2秒禁止触发')
				// 检查按钮是否被禁用
				if (this.isButtonDisabled) {
					return;
				}
				this.icon = false
				this.isUpload = true
				setTimeout(() => {
					this.icon = true
					this.isUpload = false
				}, 2000)

				// 禁用按钮
				this.isButtonDisabled = true;

				// 三秒后启用按钮
				setTimeout(() => {
					this.icon = false
					this.isButtonDisabled = false;
				}, 3000);
			},
		},
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		
		.box {
			width: 200rpx;
			height: 100rpx;
			border: 1rpx solid black;
			border-radius: 10rpx;
			padding: 0;
			background-color: #fff !important;
			transform-origin: center center;
		}
		
		.text{
			animation: bouncein 0.5s linear;
		}
		
		.box_state{
			color: black !important;
			font-size: 40rpx;
			transform-origin: center center;
			animation: scale 0.5s linear;
		}
		
		.upload {
			width: 200rpx;
			height: 100rpx;
			opacity: .6;
			border-radius: 10rpx;
			background-color: #2ecc71;
			animation: progress 2s linear forwards;
		}
	}
	

	@keyframes spin {
		0% {
			transform: translate(-50%, -50%) rotate(0deg);
		}

		100% {
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}
	
	@keyframes bouncein {
	    0% {
	        opacity: 0;
	        transform: scale(0.3);
	    }
	
	    50% {
	        opacity: 1;
	        transform: scale(1.05);
	    }
	
	    70% {
	        transform: scale(0.9);
	    }
	
	    100% {
	        transform: scale(1);
	    }
	}
	
	@keyframes progress {
		0% {
			width: 0rpx;
		}
	
		100% {
			width: 100%;
		}
	}
	
	@keyframes scale {
		0% {
			transform: scale(10);
		}
	
		50% {
			transform: scale(0.2);
		}
	
		70% {
			transform: scale(1.2);
		}
	
		90% {
			transform: scale(0.7);
		}
	
		100% {
			transform: scale(1);
		}
	}
</style>