HarmonyOS7 转场动画 Transition：页面切换更顺滑

文章目录

前言

你有没有注意过，好的 app 在页面之间切换、弹窗出现消失时，不是"啪"地硬切，而是有个淡入、滑入的过程？这种过渡就叫转场动画。

HarmonyOS 里做转场非常简单，核心就一个 .transition() 修饰符。这篇文章我把组件出现/消失、页面跳转两种转场都讲了，配代码你直接抄。

组件出现与消失的转场

最常见场景：点按钮，一个提示条从顶部滑下来；再点，它滑回去。关键是用状态控制组件"是否存在"，再给它加转场。

代码实现

typescript 复制代码

@Local showTip: boolean = false

build() {
  Column() {
    Button('切换提示')
      .onClick(() => { this.showTip = !this.showTip })

    if (this.showTip) {
      Text('这是一条温馨提示')
        .fontSize(14)
        .backgroundColor('#FFF3CD')
        .padding(10)
        .transition(TransitionEffect.SLIDE)   // 滑入滑出
    }
  }
}

讲解：

if (this.showTip) 控制这个 Text 是否存在于组件树里。
.transition(TransitionEffect.SLIDE)：当组件"出现"或"消失"时，自动播放滑入/滑出动画。

注意：transition 只对组件的插入和删除 生效。你用 if 控制存在性，它就天然有了转场时机。直接改 opacity 是不会触发 transition 的。

自定义转场方向与组合

TransitionEffect 还能组合多种效果，比如"淡入 + 从下方滑入"：

核心代码

typescript 复制代码

.transition(
  TransitionEffect.OPACITY
    .combine(TransitionEffect.translate({ y: 30 }))
    .combine(TransitionEffect.scale({ x: 0.9, y: 0.9 }))
)

OPACITY：透明度过渡（淡入淡出）。
.translate({ y: 30 })：从下方 30vp 处滑入。
.scale(...)：带一点缩放，显得更柔和。
.combine(...)：把多个效果叠加，一次满足。

页面跳转转场

页面之间切换，用 Navigation 的转场，或在 push 时指定动画。简单起见，给目标页的 @Entry 组件加转场：

完整示例

typescript 复制代码

// 目标页面
@Entry
@ComponentV2
struct DetailPage {
  build() {
    Column() {
      Text('详情页').fontSize(24)
    }
    .width('100%')
    .height('100%')
    .transition(TransitionEffect.translate({ x: '100%' }).animation({ duration: 300 }))
  }
}

x: '100%' 表示"从右边整屏宽度的位置滑入"，配合 300ms，就是经典的"新页面从右推入"效果。

转场不生效？排查清单

现象	原因	解决
完全没动画	没用 `if` 控制存在性	用 `if/else` 控制组件增删
只有淡入没滑动	只写了 OPACITY	用 `.combine(translate)`
动画卡顿	duration 太长或组合过多	精简效果，控制在 300ms 内

常见误区（小白必踩）

误区	说明
不用 `if` 控制组件存在性	`transition` 只对组件的"插入/删除"生效，直接改 `opacity` 不会触发转场。
只写 `OPACITY` 没滑动	想要滑入滑出，用 `.combine(TransitionEffect.translate(...))` 叠加。
duration 太长	转场控制在 300ms 内，太长显得拖沓，体验反而差。

下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲，改一改文末「动手改一改」里的参数，亲眼看看效果。

完整可运行示例：页面转场

用 transition 让组件出现/消失带过渡，而不是直接闪现。

代码解析

typescript 复制代码

// 配合 if 条件 + animateTo 触发 transition
@Entry
@Component
struct TransDemo {
  @State show: boolean = false

  build() {
    Column({ space: 20 }) {
      Button(this.show ? '隐藏' : '显示')
        .onClick(() => {
          animateTo({ duration: 300 }, () => { this.show = !this.show })
        })

      if (this.show) {
        Text('我带过渡出现了')
          .fontSize(22)
          .transition(TransitionEffect.OPACITY.animation({ duration: 300 }))
      }
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

你会看到什么：点按钮，文字以「淡入/淡出」的方式出现和消失，而不是硬切。

动手改一改：

把 TransitionEffect.OPACITY 改成 TransitionEffect.SLIDE，文字改为从侧边滑入。
给 Text 同时叠两个 transition：OPACITY.combine(TransitionEffect.SLIDE)。
把 duration: 300 改大，看慢动作过渡。

写在最后

转场动画是"性价比最高"的体验优化------几行 .transition() 就能让 app 贵气不少。记住核心：用 if 控制存在性来触发转场，用 combine 叠加效果。

把你项目里所有"弹窗/提示的显隐"都加上 .transition(TransitionEffect.SLIDE)，用户会明显觉得你的 app 更跟手、更顺。