uniapp 滑动删除

为什么h5不加transition: transform .3s  ，滑动之后点击不了删除按钮，求解

<template>
	<view class="container">
		<view class="item-list">
			<view class="item" v-for="(item, index) in items" :key="index" @touchstart="touchStart" @touchend="touchEnd"
				:data-index="index">
				<view class="item-content" :style="{transform: 'translateX(' + item.left + 'px)'}">{{ item.content }}
				</view>
				<view class="delete-btn" @click="deleteItem(index)">删除</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				items: [{
						content: '地址111111111111111',
						left: 0
					},
					{
						content: '地址2222222222222222',
						left: 0
					},
					{
						content: '地址3333333333333333',
						left: 0
					},
					// 更多地址...
				],
				startX: 0,
				itemIndex: 0,
			}
		},
		onLoad() {

		},
		methods: {
			touchStart(e) {
				this.startX = e.touches[0].clientX;
				this.itemIndex = e.currentTarget.dataset.index;
				this.items.forEach((item, index) => {
					if (index == this.itemIndex) {
						return
					}
					item.left = 0
				})
			},
			touchEnd(e) {
				let left = e.changedTouches[0].clientX - this.startX;
				if (left < -20) {
					this.items[this.itemIndex].left = -50;
				} else {
					this.items[this.itemIndex].left = 0;
				}
			},
			deleteItem(index) {
				this.items.splice(index, 1);
			}
		}
	}
</script>

<style>
	.container {
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 100%;
		height: 100%;
	}

	.item-list {
		width: 100%;
	}

	.item {
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 20rpx;
		position: relative;
		width: 100%;
		height: 50px;
		line-height: 50px;
	}

	.item-content {
		transition: transform .3s;
		position: relative;
		z-index: 99;
		background-color: skyblue;
		width: 100%;
		height: 100%;
	}

	.delete-btn {
		position: absolute;
		right: 0;
		top: 0;
		width: 50px;
		height: 100%;
		line-height: 50px;
		background-color: #f00;
		color: #fff;
		text-align: center;
	}
</style>