为什么同一个页面使用了两个uni-transition，如果两个动画都被切换改变后，一个变化会影响到另外一个transform: translateY()样式。

<template>
<view class="offer-page">

    <uni-forms ref="form" :model="formData">  
        <uni-forms-item label="服务要求" name="service">  
            <view class="service-demand">  
                <view class="demand-btn" :class="formData.demandType===1 && 'demand-type'" @click="changeDemandTypeFn(1)">上门安装</view>  
                <view class="demand-btn" :class="formData.demandType===2 && 'demand-type'" @click="changeDemandTypeFn(2)">到店安装</view>  
            </view>  
        </uni-forms-item>  
        <uni-forms-item label="订单模式" name="mode">  
            <view class="order-mode">  
                <view class="mode-btn" :class="formData.modeType===1 && 'mode-type'" @click="changeModeFn(1)">悬赏</view>  
                <view class="mode-btn" :class="formData.modeType===2 && 'mode-type'" @click="changeModeFn(2)">一口价</view>  
            </view>  
        </uni-forms-item>  
        <uni-transition :mode-class="tranMode.modeClass" :show="tranMode.show">  
            <uni-forms-item label="订单金额" name="amount">  
                <view class="order-amount">  
                    <text class="amount-num">¥ 589.00</text>  
                </view>  
            </uni-forms-item>  
        </uni-transition>  
        <uni-transition :mode-class="tranDemand.modeClass" :show="tranDemand.show">  
            <uni-forms-item label="地址" name="address">  
                <view class="order-address">  
                    <text>省市区县/乡镇</text>  
                    <uni-icons type="right" size="16" color="#a1a1a1"></uni-icons>  
                </view>  
            </uni-forms-item>  
            <uni-forms-item label="详细地址" name="detailed" class="detailed">  
                <view class="address-detailed">  
                    <uni-easyinput type="textarea" v-model="formData.address" :inputBorder="false" placeholder="街道/楼牌号等" />  
                    <view class="detailed-map">  
                        <text>地图选择</text>  
                        <uni-icons type="right" size="16" color="#a1a1a1"></uni-icons>  
                    </view>  
                </view>  
            </uni-forms-item>  
        </uni-transition>  
        <!-- <uni-forms-item label="备注" name="notes">  
            <uni-easyinput type="text" v-model="formData.notes" :inputBorder="false" placeholder="请输入" :clearSize="20"></uni-easyinput>  
        </uni-forms-item> -->  
    </uni-forms>  

    <ButtonBtn text="发布需求 ¥888" @clickBtn="releaseNeedFn"></ButtonBtn>  

</view>  

</template>

<script setup>
import ButtonBtn from "@/components/bottom-btn/index.vue"
import { onMounted, reactive, ref } from 'vue';

// 初始化---------------------------------
const form = ref()
const formData = reactive({
demandType: 1,
modeType: 1,
contacts: "",
phone: "",
address: "",
notes: ""
})
onMounted(()=>{

})

const releaseNeedFn = ()=>{
console.log(666);
}

// 动画
const tranDemand = reactive({
show: true,
modeClass: 'fade',
})
const changeDemandTypeFn = (num)=>{
if(formData.demandType===num) return

formData.demandType = num  
tranDemand.show = !tranDemand.show  
tranDemand.modeClass = ['fade','slide-top']  

}
const tranMode = reactive({
show: true,
modeClass: 'fade',
})
const changeModeFn = num=>{
if(formData.modeType===num) return

formData.modeType = num  
tranMode.show = !tranMode.show  
tranMode.modeClass = ['fade', 'slide-top']  

}
</script>

:v-deep(.uni-forms){

.uni-forms-item{  
    margin-bottom: 0 !important;  
    border-bottom: 1rpx solid #eee;  
    height: 100rpx;  
    display: flex;  
    align-items: center;  

    .uni-forms-item__label{  
        width: 150rpx !important;  
        min-width: 150rpx !important;  
        height: 100% !important;  
        color: #111;  
    }  

    .uni-forms-item__content{  
        height: 100% !important;  
        view{  
            height: 100%;  
            display: flex;  
            align-items: center;  
            justify-content: flex-end;  
            color: #a1a1a1;  
            font-size: 28rpx;  
        }  

        .demand-btn, .mode-btn{  
            width: 130rpx;  
            height: 50rpx;  
            justify-content: center;  
            margin-left: 40rpx;  
            color: #111;  
            font-size: 24rpx;  
            border-radius: 10rpx;  
            background-color: #f6f6f6;  
            &.demand-type{  
                background-color: #fe5103;  
                color: #fff;  
            }  
            &.mode-type{  
                background-color: #fe5103;  
                color: #fff;  
            }  
        }  

        .amount-num{  
            color: #fe5103;  
        }  

        .uni-easyinput__content-input{  
            padding-left: 0 !important;  
            height: 100% !important;  
        }  

    }  

    // 处理详细地址  
    &.detailed{  
        height: auto !important;  
        align-items: flex-start !important;  
        .uni-forms-item__label{  
            height: 100rpx !important;  
        }  
        .uni-forms-item__content{  
            height: auto !important;   
            .address-detailed{  
                padding-top: 40rpx !important;  
                align-items: flex-start !important;  

                .uni-easyinput__content-textarea{  
                    margin: 0 !important;  
                }  
                .detailed-map{  
                    margin-left: 20rpx;  
                }  
            }  
        }  
    }  
}  

}

.release{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin-bottom: constant(safe-area-inset-bottom); / 适配安全底部区域 /
margin-bottom: env(safe-area-inset-bottom); / 适配安全底部区域 /

button{  
    color: #fff;  
    border-radius: 40rpx;  
    background-color: #fe5509;  
}  

}
}

.tran-bug{

}
</style>