HarmonyOS SideBarContainer 转场动画

SideBarContainer 组件只提供了展示和隐藏按钮属性: showControlButton ,使用这个属性是可以实现带动画的隐藏和显示,但是会按钮显示在页面上,目前需求中关闭的时候没有按钮可以点击,要实现点击侧边栏外面的区域实现关闭,目前只能通过showSideBar 属性去关闭侧边栏,但动画就没有了,现在期望能实现 改变 showSideBar 属性时,侧边栏的弹出和显示都能带上动画的效果

HarmonyOS
2025-01-09 13:57:04
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可参考如下demo

@Entry
@Component
struct Index {
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1
  @State showSideBar: boolean = false

  @State showFlag: Visibility = Visibility.Visible;

  // 延迟关闭弹窗,让自定义的出场动画显示
  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: 1 })
          .onAction((event?: GestureEvent) => {
            if (event) {
              // this.showSideBar = false
              this.cancel()
            }
          })
      )
      // .margin({ top: 50, left: 20, right: 30 })
    }
    .sideBarPosition(SideBarPosition.End)
    .showSideBar(this.showSideBar)
    .showControlButton(false)
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
  }
}
分享
微博
QQ
微信
回复
2025-01-09 17:28:35
相关问题
如何实现动画转场效果
1223浏览 • 1回复 待解决
HarmonyOS Navigation实现Dialog转场动画
348浏览 • 1回复 待解决
HarmonyOS 无感转场动画推荐方案
362浏览 • 1回复 待解决
HarmonyOS navigation导航转场动画怎么写
391浏览 • 1回复 待解决
HarmonyOS 页面内的组件转场动画
685浏览 • 1回复 待解决
HarmonyOS Refresh和页面转场动画demo
272浏览 • 1回复 待解决
如何全局设置页面转场动画
883浏览 • 1回复 待解决
Tabs 出现/消失转场动画效果
688浏览 • 1回复 待解决
HarmonyOS 复用转场动画示例3问题
252浏览 • 1回复 待解决
ArkUI转场动画可以改颜色吗?
2258浏览 • 1回复 待解决
请问如何去掉ability的转场动画
11506浏览 • 2回复 待解决
转场动画,谁有好的方案吗?
823浏览 • 1回复 待解决
HarmonyOS Navigation转场动画的一些思路
332浏览 • 1回复 待解决
HarmonyOS SideBarContainer使用问题
312浏览 • 1回复 待解决