HarmonyOS 平移动画问题
代码如下:
@Entry
@Component
struct TranslateAnimatePage {
@State isPresent: boolean = false;
private tagList: string[] = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii"];
private showFilterHeight: number = 400;
private duration: number = 1500;
build() {
Column() {
Row()
.width("100%")
.height(200)
.backgroundColor('#ED5151')
.onClick(() => {
this.isPresent = !this.isPresent;
});
Stack({ alignContent: Alignment.Top }) {
Row() {
Text('周三五折即将开始')
.fontColor('#ED5151')
.borderColor('#ED5151')
.height(24)
.fontSize(12)
.borderWidth(0.7)
.padding({ left: 10, right: 10 })
.borderRadius(4);
Blank()
.layoutWeight(1);
Text('分类')
.fontColor('#ED5151')
.height(24)
.fontSize(12)
.padding({ left: 10, right: 10 })
.onClick(() => {
this.isPresent = !this.isPresent;
});
}.padding({ top: 6, left: 15, bottom: 6 })
.backgroundColor(Color.White);
if (this.isPresent) {
Stack({ alignContent: Alignment.Top }) {
List() {
ForEach(this.tagList, (item: string) => {
ListItem() {
Text(item)
.fontSize(14)
.fontColor('#ED5151')
.height(36)
.width('100%')
.textAlign(TextAlign.Center)
.borderRadius(14)
.padding({ left: 10, right: 10 });
}
}, (item: string) => {
return item;
})
}
.height(this.showFilterHeight)
.width('100%')
.backgroundColor('#F5F5F5')
.borderRadius({ bottomLeft: 8, bottomRight: 8 })
.transition(TransitionEffect.translate({ y: -this.showFilterHeight })
.animation({ duration: this.duration }));
}
.height('100%')
.width('100%')
.backgroundColor("#7F202020")
.transition(TransitionEffect.opacity(0.5).animation({ duration: this.duration }))
.margin({
top: 36
});
}
}
}.height('100%')
.width('100%')
.backgroundColor('#F5F5F5')
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 平移动画
66浏览 • 1回复 待解决
HarmonyOS position设置x,y值的更改,没有平移动画
28浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙项目中使用JS插值器动画实现元素的平移动画效果?
125浏览 • 1回复 待解决
Tabs组件选中下划线需要平移动效
1744浏览 • 1回复 待解决
HarmonyOS 移动上XComponent注册问题
450浏览 • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题
527浏览 • 1回复 待解决
HarmonyOS 组件旋转后,平移方向出错
72浏览 • 1回复 待解决
数值动画如何设置后固定在原地或者继续移动?
7644浏览 • 1回复 待解决
HarmonyOS 缩放动画问题
54浏览 • 1回复 待解决
HarmonyOS 动画使用问题
31浏览 • 1回复 待解决
HarmonyOS Grid拖拽动画问题
72浏览 • 1回复 待解决
HarmonyOS PAG动画使用问题
29浏览 • 1回复 待解决
HarmonyOS Naviagtion动画问题咨询
35浏览 • 1回复 待解决
HarmonyOS 路径动画相关问题
674浏览 • 1回复 待解决
#鸿蒙通关秘籍#在HarmonyOS Next地图组件中如何使用动画来移动相机位置?
158浏览 • 1回复 待解决
HarmonyOS Tabs 官方示例9,支持在BarMode.Fixed下,下划线支持动画移动到点击的tab下。但是没有支持BarMode.Scrollable模式下,下划线动画移动交互
94浏览 • 1回复 待解决
HarmonyOS 动画执行时机问题
277浏览 • 1回复 待解决
关于属性动画的问题?
10133浏览 • 3回复 待解决
HarmonyOS list编辑移动效果
259浏览 • 1回复 待解决
slice之间跳转动画问题?何如把默认的左右动画换成上下动画?
4318浏览 • 1回复 待解决
Ets 手势问题, PanGesture与PinchGesture 如何监听平移方向与捏合是外扩,还是内缩?
2640浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙应用中修改背景图片位置实现移动动画?
138浏览 • 1回复 待解决
HarmonyOS 组件旋转后,平移的x y轴也跟着变了
29浏览 • 1回复 待解决
偶尔移动地图失败,执行了移动地图的代码,偶尔它不会移动地图,还是显示在北京。大多数是会移动的。
330浏览 • 1回复 待解决
HarmonyOS animateTo过渡动画问题,内部文字显示异常
30浏览 • 1回复 待解决
加上
对组件进行裁剪、遮罩处理:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5#示例1