如何写精华回答,获更多曝光?
 发布
 显示动画(正常): 当 barHeight 从 0 动画到 60 时,TabBar 连同其内部的文字内容会一起平滑地展开,效果符合预期。
隐藏动画(异常): 当 barHeight 从 60 动画到 0 时,TabBar 内部的文字内容会瞬间消失,只有 TabBar 的背景容器在执行一个高度从 60 慢慢变到 0 的收缩动画。
@Entry
@Component
struct ProblematicTabBarAnimationDemo {
  @State activeIndex: number = 0;
  @State tabBarHeight: number = 60;
  private controller: TabsController = new TabsController();
  @Builder
  tabBarItem(index: number, title: string) {
    Column({ space: 4 }) {
      Text(title)
        .fontSize(25)
        .fontColor(this.activeIndex === index ? '#007DFF' : '#666666')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
      TabContent() {
        Column({ space: 20 }) {
          Text("动画问题演示")
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.White)
          Text("点击“隐藏”按钮,观察TabBar的文字瞬间消失,只有背景区域在执行动画。")
            .width('90%')
            .textAlign(TextAlign.Center)
            .fontColor(Color.White)
            .opacity(0.8)
          Button("隐藏 TabBar ")
            .onClick(() => {
              this.getUIContext().animateTo({
                duration: 5000,
                curve: Curve.Ease
              }, () => {
                this.tabBarHeight = 0;
                this.controller.setTabBarTranslate({ y: 60 })
              });
            })
          Button("显示 TabBar")
            .onClick(() => {
              this.getUIContext().animateTo({
                duration: 5000,
                curve: Curve.Ease
              }, () => {
                this.tabBarHeight = 60;
                this.controller.setTabBarTranslate({ y: 0 })
              });
            })
        }
        .width("100%").height("100%")
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#C78D67")
      }
      .tabBar(this.tabBarItem(0, "首页"))
      TabContent() {
        Column() {
          Text("评论页面")
            .width("100%").height("100%")
            .fontSize(30).textAlign(TextAlign.Center)
            .backgroundColor("#F0DCB1")
        }
      }
      .tabBar(this.tabBarItem(1, "评论"))
    }
    .width('100%')
    .height('100%')
    .barHeight(this.tabBarHeight)
    .onChange((index: number) => {
      this.activeIndex = index;
    })
  }
}