转场动画forEach循环添加回调函数添加index为啥全部触发了?
/**
* 转场动画(组件)transition
* 需要配合animateTo才能生效
*
*/
@Entry
@Component
struct TransitionTest2 {
@State numbers: Object[] = []
startNumber: number = 6;
build() {
Column({ space: 10 }) {
Scroll() {
Column({ space: 10 }) {
ForEach(this.numbers, (item,index) => {
// ForEach下的直接组件需配置transition效果
Row() {
Text(item.text + item.id)
.height(40)
.backgroundColor(Color.Orange).layoutWeight(1)
// Button('删除').type(ButtonType.Normal).onClick(()=>{
// animateTo({},()=>{
// this.numbers.splice(index,1)
// })
// })
}
.transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } })
}, item => item.id)
}
.margin(10)
// .justifyContent(FlexAlign.Start)
// .alignItems(HorizontalAlign.Center)
.width("90%").height('100%')
}.layoutWeight(1).backgroundColor(Color.Green)
Row(){
Button('头部添加')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 往数组头部插入一个元素,导致ForEach在头部增加对应的组件
this.numbers.unshift({ text: '文档', id: this.startNumber.toString() });
this.startNumber++;
})
})
Button('尾部添加')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 往数组尾部插入一个元素,导致ForEach在尾部增加对应的组件
this.numbers.push({ text: '文档', id: this.startNumber.toString() });
this.startNumber++;
})
})
Button('删除头部')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 删除数组的头部元素,导致ForEach删除头部的组件
this.numbers.shift();
})
})
Button('删除尾部')
.onClick(() => {
animateTo({ duration: 1000 }, () => {
// 删除数组的尾部元素,导致ForEach删除尾部的组件
this.numbers.pop();
})
})
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
}
}
UI
forEach循环
赞
收藏 0
回答 1
待解决
相关问题
如何实现动画转场效果
424浏览 • 1回复 待解决
如何全局设置页面转场动画
365浏览 • 1回复 待解决
使用转场动画时,如何在消失转场动画完成时执行其他操作
955浏览 • 1回复 待解决
ArkUI转场动画可以改颜色吗?
746浏览 • 1回复 待解决
TransitionEffect动画循环播放如何关闭
728浏览 • 1回复 待解决
鸿蒙卡片添加到桌面会触发哪个方法呢?
5239浏览 • 1回复 待解决
服务中心添加卡片怎么添加?
5166浏览 • 1回复 待解决
ForEach无法遍历全部数据,是什么原因
723浏览 • 1回复 待解决
list添加或删除item需要设置入场出场动画典型案例
449浏览 • 1回复 待解决
复杂类型foreach循环,关于复杂类型的循环渲染有哪些?
317浏览 • 1回复 待解决
转场动画,谁有好的方案吗?
207浏览 • 1回复 待解决
请问如何去掉ability的转场动画?
9911浏览 • 2回复 待解决
鸿蒙工程可以添加.so 文件吗?怎么添加?
1602浏览 • 1回复 待解决
ForEach循环渲染的过程是什么样的
338浏览 • 1回复 待解决
forEach循环中,编译报错:Not all code paths return a value
355浏览 • 1回复 待解决
拖动添加图片功能,软件添加功能图标,实现新增功能
356浏览 • 1回复 待解决
ForEach什么情况下会触发复用
392浏览 • 1回复 待解决
Foreach循环渲染,数据源改变时的重复渲染
392浏览 • 1回复 待解决
组件被隐藏后 onVisibleAreaChange 事件触发了两次
898浏览 • 1回复 待解决
自定义弹窗自定义转场动画
469浏览 • 1回复 待解决
buttom样式怎么添加?
5367浏览 • 2回复 待解决
添加候选网络配置,使用有关能力接口添加候选网络配置
327浏览 • 1回复 待解决
图片如何添加渐变模糊
814浏览 • 1回复 待解决
TabList可以添加图片么?
6808浏览 • 3回复 待解决
Waterflow怎么添加header能力?
35浏览 • 1回复 待解决
没太看明白问题是什么