HarmonyOS Navigation中，动态设置mode未达到期望效果？

Question

希望点击右上角x时，左侧界面向右挤压，直至完全展现，现在只是设置NavigationMode.Auto-\>NavigationMode.Stack，然后另一种方案是通过动态设置navBarWidth，但是通过动效设置navBarWidth时，比如50-100时，右侧评论界面直接先消失了，没有达到预期效果。

Answer 1

参考示例Demo：

@Entry
@Component
struct Index {
  @State active: boolean = false
  text =
    "默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多默认设备屏幕尺寸较小，采用multiton启动模式不仅无法给用户提供便利，反而可能消耗更多"
  @State leftTag: number = 4
  @State flag: boolean = false
  build() {
    Column() {
      Button('close SideBar')
        .onClick(() => {
          animateTo({ duration: 5300 }, () => {
            this.leftTag = 8
          })
        })

      GridRow({ columns: { sm: 8 } }) {
        GridCol({ span: { sm: this.leftTag } }) {
          Column() {
            Text(this.text).width("100%")
              .renderFit(RenderFit.RESIZE_FILL)
          }.backgroundColor(Color.Red).width("100%").height("100%")
        }

        if (this.leftTag === 4) {
          GridCol({
            span: { sm: 4 },
          }) {
            Column() {
              Text(this.text).width("100%")
            }.backgroundColor(Color.Green).width("100%").height("100%")
          }
          .transition(
            TransitionEffect.asymmetric(
              // 出现动画
              TransitionEffect.IDENTITY
              // 消失动画
              , TransitionEffect.translate({ x: 200, y: 0 }).animation({ duration: 5300 })
            )
          )
        }
      }
      .height('100%')
    }
  }
}