uni-app swiper 左滑 动画

html代码

<swiper class="photoBox" style="overflow: hidden;transform: translateY(0);" >
<swiper-item v-for="(item,index) in 5" :key="index">
	<view :animation="index == currentIndex?animationData:animationData2" class="photo ">item</view>
</swiper-item>
</swiper>

Js代码

<script>
export default {
	data() {
			return {
					animationData: {},
					animationData2: {},
				}
		}
	onLoad() {
				// 左右滑动动画 js
			// 收缩
			var animation = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease',
			})
			animation.scale(1).step()
			this.animationData = animation.export()
			// 展开
			var animation2 = uni.createAnimation({
				duration: 400,
				timingFunction: 'ease',
			})
			animation2.scale(0.94).step()
			this.animationData2 = animation2.export()
	}
	
}
</script>

css样式

.photoBox {
			margin-top: 8rpx;
			width: 100%;
			border-radius: 50rpx;
			height:500rpx;
			.photo {
				width: 100%;
				height: 100%;
				border-radius: 50rpx;
				position: absolute;
				z-index: 0;
			}
}