HarmonyOS 组件内转场动画，如何用条件控制是否进行转场动画

有一个组件使用了transition转场动画，但是希望可以控制，在某些情况下不使用动画直接出现/隐藏。目前测试发现如果使用了动画出现，那么一定会使用动画隐藏，无法控制不使用动画隐藏。

代码如下：

@Component
struct DemoPage {
  @State animated: boolean = true
  @State show: boolean = false
  build() {
    NavDestination() {
      Column() {
        if (this.show) {
          Column()
            .width('60%')
            .height(50)
            .backgroundColor(Color.Red)
            .transition(TransitionEffect.OPACITY.animation({ duration: this.animated ? 1000 : 0 }))
        }

        Button('show and animate')
          .margin({ top: 50 })
          .onClick(() => {
            this.animated = true
            this.show = true
          })
        Button('show and !animate')
          .margin({ top: 50 })
          .onClick(() => {
            this.animated = false
            this.show = true
          })
        Button('!show and animate')
          .margin({ top: 50 })
          .onClick(() => {
            this.animated = true
            this.show = false
          })
        Button('!show and !animate')
          .margin({ top: 50 })
          .onClick(() => {
            this.animated = false
            this.show = false
          })


      }
      .width('100%')
      .height('100%')
    }.hideTitleBar(true)
  }
}

HarmonyOS

aquaa

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

示例参考如下：

@Component
struct DemoPage {
  @State animated: boolean = true
  @State show: boolean = false
  build() {
    NavDestination() {
      Column() {
        if (this.show) {
          Column()
            .width('60%')
            .height(50)
            .backgroundColor(Color.Red)
            .transition(this.animated
              ?
            TransitionEffect.OPACITY.animation({ duration: 1000 })
              :
            TransitionEffect.OPACITY.animation({ duration: 0 }).combine(TransitionEffect.IDENTITY)
            )
        }

        Button('需要动画-显示')
          .margin({ top: 50 })
          .onClick(() => {
            this.show = true
            this.animated = true
          })

        Button('需要动画-隐藏')
          .margin({ top: 50 })
          .onClick(() => {
            this.show = false
            this.animated = true
          })

        Button('不需要动画-显示')
          .margin({ top: 50 })
          .onClick(() => {
            this.show = true
            this.animated = false
          })

        Button('不需要动画-隐藏')
          .margin({ top: 50 })
          .onClick(() => {
            this.show = false
            this.animated = false
          })

      }
      .width('100%')
      .height('100%')
    }.hideTitleBar(true)
  }
}

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 组件内转场动画，如何用条件控制是否进行转场动画

订阅鸿蒙技术特刊，精选内容抢先看