uniapp制作微信小程序动画效果

业务需求：
点击右侧橙色背景 ‘身份切换’圆形后，显示弹框，同时橙色圆形1s钟侧滑显示

选择身份后弹窗消失，同时橙色圆形回到原位

<!-- 切换身份圆圈 -->
<view class="changeIdentities" :class="{ active : active }" @tap="showChangeIdentitiesBox">
	<view class="">身份</view>
	<view class="">切换</view>
</view>

<!-- 身份切换选框 -->
<view class="cu-modal" :class="{ show: active }" @tap="hideModal">
	<view class="cu-dialog" @tap.stop style="background: none;width: auto;">
		<view class="changeIdentitiesBox">
			<view class="title">身份切换</view>
			<view class="content">
				<view class="service" @tap="changeIdentities('服务商')">
					<image class="identitiesImg" src="http://10.100.0.120/temp/imgs/serviceIdentities.png" mode=""></image>
					<view class="identitiesText">服务商</view>
				</view>
				<view class="customer" @tap="changeIdentities('消费者')">
					<image class="identitiesImg" src="http://10.100.0.120/temp/imgs/customerIdentities.png" mode=""></image>
					<view class="identitiesText">消费者</view>
				</view>
			</view>
		</view>
	</view>
</view>

.changeIdentities {
	position: fixed;
	z-index: 400;
	right: -55rpx;
	bottom: 370rpx;
	width: 110rpx;
	height: 110rpx;
	line-height: 55rpx;
	color: rgba(255, 255, 255, 1);
	background-color: rgba(255, 141, 26, 1);
	border-radius: 50%;
	font-size: 30rpx;
	text-align: center;
	transition: all 1s linear;
}

.active {
	transform: translateX(-55rpx);
}

.changeIdentitiesBox {
	width: 520rpx;
	height: 372rpx;
	background-color: white;

	.title {
		padding: 16rpx 0;
		text-align: center;
		color: rgba(0, 0, 0, 1);
		font-size: 34rpx;
		font-weight: bold;
		border-bottom: 2rpx solid rgba(229, 229, 229, 1);
	}

	.content {
		display: flex;
		padding: 34rpx 0;

		.service {
			flex: 1;
		}

		.customer {
			flex: 1;
		}

		.identitiesImg {
			width: 160rpx;
			height: 160rpx;
		}

		.identitiesText {
			margin-top: 20rpx;
			color: rgba(80, 80, 80, 1);
			font-size: 32rpx;
			font-weight: bold;
		}
	}
}

// 切换身份 服务商 <-> 消费者
showChangeIdentitiesBox() {
	this.active = !this.active;
},

changeIdentities(identities) {
	this.identities = identities;
	this.getServiceOrderNav();
	this.getServiceOrder();
	this.active = false;
},
//点击蒙层关闭
hideModal() {
	this.active = false;
},