HarmonyOS 鸿蒙Next transition组件内转场问题

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next transition组件内转场问题 组件出现的过渡动画是正常显示的，由下到上。
但在消失的时候过渡动画显示异常，直接跑到顶部了然后消失，不应该是往下慢慢消失吗

下面是代码，求大佬解释一下，是bug还是代码问题

@Component
@Entry
struct test{
  @State checkCarType:boolean = false

@Builder test(){
Column(){
  Text('组件')
}
.backgroundColor(Color.Green)
.position({bottom:500,left:0})
.zIndex(1)
.visibility(this.checkCarType? Visibility.Visible :Visibility.None)
.transition(
  TransitionEffect.translate({y:1000}).animation({duration:1000}))

build(){
    Column(){
      this.test()
      Button('显示').onClick((event: ClickEvent) => {
        this.checkCarType = !this.checkCarType
      })
    }
    .size({width:'100%',height:'100%'})
  }

更多关于HarmonyOS 鸿蒙Next transition组件内转场问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
13 回复

破案了，我知道为啥了，我也没注意这个细节；

.this.visibility(this.checkCarType ? this.Visibility.Visible : this.Visibility.Hidden)

不是使用 Visibility.None 啊，是用 Visibility.Hidden；

使用 Visibility.None 的时候，不参与布局的，所以就没有动画效果。

更多关于HarmonyOS 鸿蒙Next transition组件内转场问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


原来如此，但是if的话不也是没参与布局吗，满足条件才显示啊

if /else 的话，会创建或者销毁组件，在某个生命周期钩子中，肯定是先执行了transition 动画，再进行销毁/创建组件。我理解跟 Visibility 不是一码事，Visibility.None 直接不参与布局，transition 完全没法去计算动画路径，所以不生效。

小哥帮忙点个采纳点赞呗😀，

能说什么，辛苦各位开发者了，

希望HarmonyOS能加强与其他品牌设备的兼容性，让更多人受益。

姓名

张三

职位

软件工程师

所在地

北京

个人简介

资深IT专家，专注于人工智能领域。

技能

  • Python
  • Java
  • C++

代码改改吧，不要用 visibility 来控制

@Component
@Entry
struct test {
  @State checkCarType: boolean = false
  @State visible: boolean = false

  @Builder
  test() {
    Column() {
      Text('组件')
    }
    .backgroundColor(Color.Green)
    .position({ bottom: 500, left: 0 })
    .zIndex(1)
    .transition(
      TransitionEffect.translate({ y: 1000 }).animation({ duration: 1000 })
    )
  }

  build() {
    Column() {
      if (this.checkCarType) {
        this.test()
      }
      Button('显示').onClick((event: ClickEvent) => {
        this.checkCarType = !this.checkCarType
      })
    }
    .size({ width: '100%', height: '100%' })
  }
}

换成 if 来进行控制，组件内转场主要通过 transition 属性，是在组件插入和删除时显示过渡动效，visibility 是不生效的。

当组件Visibility属性在可见和不可见之间改变时，只触发该组件的transition效果。

官网这句话是什么意思啊，不是很懂，

HarmonyOS的分布式文件系统让我在多设备间共享文件变得更加方便。

我也看到官网这句话了，没太理解，反正我之前试了之后，Visibility 触发总是有问题，感觉官网文档有问题，目前只有 插入和删除有正常的 transition 触发。业务中不行就用 animateTo 吧，不过 transition 的性能会更好。

好的，算是解决了，非常感谢，

针对HarmonyOS（鸿蒙）Next transition组件内转场问题，以下提供直接相关的解答：

在HarmonyOS中，Next transition组件用于实现页面或元素之间的过渡效果。若遇到内转场问题，可能涉及以下几个关键点：

  1. 过渡属性配置：确保在XML布局文件或代码中正确配置了过渡属性，如enterAnim、exitAnim、sharedElementEnterAnim和sharedElementExitAnim等，这些属性定义了元素进入、退出以及共享元素过渡时的动画效果。

  2. 共享元素匹配：对于共享元素过渡，确保在两个页面或布局中，共享元素的transitionName属性一致，这是实现元素平滑过渡的关键。

  3. 触发时机：检查过渡效果的触发时机是否正确，通常是在页面跳转或元素状态改变时通过代码或XML配置触发。

  4. 版本兼容性：确认所使用的HarmonyOS版本是否支持所需的过渡效果，某些高级过渡特性可能需要在特定版本或更高版本中才能使用。

  5. 调试与日志：利用开发者工具中的调试功能和日志输出，检查过渡效果执行过程中是否有异常或错误发生。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部