uniapp 点击按钮，利用css元素抖动效果

<template>
	<view class="test2-wrap">
		<button class="test-btn" @click="shakeFn">测试抖动效果</button>
		<view class="red-box " :class="handleShake && 'shake-x-ani'"></view>
	</view>
</template>

<script>
	function throttle(fn, delay) {
	  let timer = null;
	  return function() {
	    let context = this;
	    let args = arguments;
	    if (!timer) {
	      timer = setTimeout(function() {
	        fn.apply(context, args);
	        timer = null;
	      }, delay);
	    }
	  }
	}
	export default {
		data(){
			return{
				handleShake: false
			}
		},
		methods:{
			shakeFn:throttle(function(){
				this.handleShake = true
				setTimeout(()=>{
					this.handleShake = false
				},500)
			},600)
		}
	}
</script>

<style lang="scss" scoped>
	.test2-wrap{
		.test-btn{
			margin-top: 30rpx;
		}
		.red-box{
			width: 100rpx;
			height: 100rpx;
			background: red;
			margin-top: 30rpx;
			margin-left: 200rpx;
		}
		
	}
	.shake-x-ani{
		animation: shakeAni 0.5s ease-in-out;
	}
	@keyframes shakeAni {
		10%, 90% { transform: translate3d(-1px, 0, 0); }
		20%, 80% { transform: translate3d(+2px, 0, 0); }
		30%, 70% { transform: translate3d(-4px, 0, 0); }
		40%, 60% { transform: translate3d(+4px, 0, 0); }
		50% { transform: translate3d(-4px, 0, 0); }
	}
</style>