UNIAPP为分别多个元素添加动画

	.scale{
		animation: scale 300ms;
	}
	@keyframes scale{
		0% {transform: scale(1);}
		50% {transform: scale(1.2);}
		100% {transform: scale(1);}
	}

我们知道上面是css动画,

当一个元素被加上.scale这个样式名时,就会产生动画

uniapp中我们可以为元素动态绑定class

<view :class="sclae:isTue" @click="viewClick">some.text</view>

当点击时运行viewClick函数,在函数中设置isTue变量为true,就可以添加上.scale

<view :class="sclae:isTue" @click="viewClick">some.text</view>
<script setup>
const isTrue=ref(false)
function viewClick(){
    isTrue.value=True
}
</script>

这样有一个问题,如果很多元素需要添加,

则需要定义很多的变量,

我们可以这样变通下:

<template>
<view class="box boxcontent" :class="{scale:isClick[11]}" @click="clickState(11)">
 1111
</view>
<view class="box boxcontent" :class="{scale:isClick[12]}" @click="clickState(12)">
 222
</view>

</template>

<script setup>

const isClick=ref({})

   	function clickState(e){
		isClick.value[e]=true;
		setTimeout(()=>{
			isClick.value[e]=false;
		},300)
	}
</script>

<style lang="scss" scoped>
	.scale{
		animation: scale 300ms;
	}
	@keyframes scale{
		0% {transform: scale(1);}
		50% {transform: scale(1.2);}
		100% {transform: scale(1);}
	}
</style>

变量定义成对象,函数传入一个数字,点击时把这个数字存入对象中,

这样的话,我们只需要定义一个变量,用不同的数字就可以为不周的元素添加动画了.

同样,

也可以为列表项批量添加动画,如

<view v-for="(item,index) in orderList" :key="index">
		<view @togo="click(key)" :class="{scale:isClick[item._id]}>
        </view>
</view>
<script setup>
    const isClick = ref({}) //动画钩子

	function click(e) {
		isClick.value[e] = true
		console.log(e);
		setTimeout(() => {
			isClick.value[e] = false;
			uni.navigateTo({
				url: '/pages/myorderPsList/myorderPsList?id=' + e
			})
		}, 300)
}

</script>
<style lang="scss" scoped>
	.scale {
		animation: scale 300ms;
	}

	@keyframes scale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}
</style>