uni-popup打开，首页自带的tabbar如何丝滑的消失 不使用 uni.hideTabBar

主要方法   changeTabbarStyle()

<template>
  <view>
    <button @click="togglePopup">显示/隐藏弹出层</button>
    <uni-popup ref="popup" @open="onPopupOpen" @close="onPopupClose">
      <!-- 弹出层内容 -->
      <view class="popup-content">这是一个弹出层</view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  methods: {
    togglePopup() {
      this.$refs.popup.open();
    },
    onPopupOpen() {
      // 弹出层打开时，改变tabbar的样式
      this.changeTabbarStyle(true);
    },
    onPopupClose() {
      // 弹出层关闭时，恢复tabbar的样式
      this.changeTabbarStyle(false);
    },
    changeTabbarStyle(isOpen) {
      const tabbar = document.querySelector('.uni-tabbar');
      if (tabbar) {
        if (isOpen) {
          tabbar.style.transition = 'transform 0.3s, opacity 0.3s';
          tabbar.style.transform = 'translateY(100%)';
          tabbar.style.opacity = 0;
        } else {
          tabbar.style.transition = 'transform 0.3s, opacity 0.3s';
          tabbar.style.transform = 'translateY(0)';
          tabbar.style.opacity = 1;
        }
      }
    }
  }
}
</script>

<style>
.uni-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transition: transform 0.3s, opacity 0.3s; /* 设置过渡效果 */
}
.popup-content {
  /* 弹出层样式 */
  padding: 20px;
  background-color: #fff;
}
</style>