小程序 渲染和过度同时进行了，过渡就失效了咋办

<view @click="change">开关</view>
<view v-if="!mode"></view>
<view  v-else >
    <view class="search-box " :class="{'search-box-active':mode}">这里有个过渡效果</view>
</view>
change（）{
this.mode=true
}
<!--去掉 v-else 正常  就是过度和view渲染同时进行了过渡就失效了-->
<!-- 试过用另一个参判断过渡执行是可以的，但是要延迟才可以 如下-->
<view @click="change">开关</view>
<view v-if="!mode"></view>
<view  v-else >
    <view class="search-box " :class="{'search-box-active':true}">这里有个过渡效果</view>
</view>
change（）{
this.mode=true
setTimeout(() => {
   this.status=true
}, 100)
}