HarmonyOS SideBarContainer通过showSideBar来自定义控制展开收起，没有动画效果？

@Entry  
@Component  
struct SideBarContainerDemo {  
  @State arr: number[] = [1, 2, 3]  
  @State current: number = 1  
  @State showSideBar: boolean = false  
  @State showFlag: Visibility = Visibility.Hidden;  
  // 延迟关闭侧边栏，让自定义的出场动画显示  
  cancel(){  
    this.showFlag=Visibility.Hidden  
    setTimeout(()=>{  
      this.showSideBar = !this.showSideBar  
    }, 1000)  
  }  
  build() {  
    SideBarContainer(SideBarContainerType.Overlay) {  
      Column() {  
        ForEach(this.arr, (item: number) => {  
          Column({ space: 5 }) {  
            Text("Index0" + item)  
              .fontSize(25)  
              .fontColor(this.current === item ? '#0A59F7' : '#999')  
              .fontFamily('source-sans-pro,cursive,sans-serif')  
          }  
          .onClick(() => {  
            this.current = item  
          })  
        }, (item: string) => item)  
      }  
      .visibility(this.showFlag)  
      .transition(TransitionEffect.OPACITY.animation({duration: 1000}).combine(TransitionEffect.translate({x: 100})))  
      .width('100%')  
      .justifyContent(FlexAlign.SpaceEvenly)  
      .backgroundColor(Color.Pink)  
      Column() {  
        Button('打开侧边栏').onClick(() => {  
          this.showFlag=Visibility.Visible  
          this.showSideBar = true  
        })  
        Button('关闭侧边栏').onClick(() => {  
          this.cancel()  
        })  
      }  
      .backgroundColor(Color.Green)  
      .gesture(  
        TapGesture({ count: 2 })  
          .onAction((event?: GestureEvent) => {  
            if (event) {  
              this.cancel()  
            }  
          })  
      )  
    }  
    .sideBarPosition(SideBarPosition.End)  
    .showSideBar(this.showSideBar)  
    .showControlButton(false)  
    .sideBarWidth(150)  
    .minSideBarWidth(50)  
    .maxSideBarWidth(300)  
    .minContentWidth(0)  
    .onChange((value: boolean) => {  
      console.info('status:' + value)  
    })  
  }  
}