HarmonyOS 转场动画 ForEach控制

本文我们继续说组件的专场特效上文 HarmonyOS 转场动画我们通过if控制了转场效果
本文我们通过 ForEach 控制它的加载和删除
这时候就有人会好奇 ForEach 怎么控制删除呢？
很简单循环次数不同例如第一次 10个第二次 5个那么后面的五个就相当于删除啦

我们先编写代码如下

@Entry
@Component
struct Index {

  @State ArrString:string[] = [
    "金樽清酒斗十千",
    "飞流直下三千尺",
    "飞流直下三千尺",
    "三河之水天上来"
  ];

  build() {
    Column({space: 30}) {
      ForEach(
        this.ArrString,
        (item)=>{
          Text(item)
        }
      )

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

我们就是写了个数组字符串类型的然后循环展示所有内容
在这里插入图片描述
我们可以改写代码如下

@Entry
@Component
struct Index {

  @State ArrString:string[] = [
    "金樽清酒斗十千",
    "飞流直下三千尺",
    "飞流直下三千尺",
    "三河之水天上来"
  ];

  build() {
    Column({space: 30}) {
      ForEach(
        this.ArrString,
        (item)=>{
          Text(item).transition({
            type: TransitionType.All,
            translate: {x:200,y:100 }
          })
        }
      )
      Button("添加").onClick(()=>{
        animateTo({}, () => {
          this.ArrString.unshift("凤兮凤兮归故乡");
        });
      })
    }
    .width('100%')
    .height('100%')
  }
}

这里我们渲染列表组件上加上了 transition 动画绑定
然后我们给点击事件加上 animateTo 意思需要动画 unshift 往数组最前面加一条数据

我们运行代码然后点击按钮显然它组件移除和进入都有动画了
在这里插入图片描述
这里我们可以给 ForEach 加上 ,item => JSON.stringify(item)

比较像vue的for key 让他不要已经有的元素也整个换掉了
我们点击
就只有一个元素飞出来了

然后各种操作数据集合的语法大家都可以这样去玩啦