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 平移动画
202浏览 • 1回复 待解决
HarmonyOS position设置x,y值的更改,没有平移动画
130浏览 • 1回复 待解决
Tabs组件选中下划线需要平移动效
1852浏览 • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙项目中使用JS插值器动画实现元素的平移动画效果?
306浏览 • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题
653浏览 • 1回复 待解决
HarmonyOS 移动上XComponent注册问题
689浏览 • 1回复 待解决
数值动画如何设置后固定在原地或者继续移动?
7759浏览 • 1回复 待解决
HarmonyOS 组件旋转后,平移方向出错
169浏览 • 1回复 待解决
HarmonyOS 组件动画问题
78浏览 • 1回复 待解决
HarmonyOS 缩放动画问题
161浏览 • 1回复 待解决
HarmonyOS 动画使用问题
145浏览 • 1回复 待解决
HarmonyOS customDialog有方案修改消失的动画效果吗?比如去掉消失时的缩放效果,改成向下平移效果
63浏览 • 1回复 待解决
HarmonyOS Naviagtion动画问题咨询
412浏览 • 1回复 待解决
HarmonyOS PAG动画使用问题
138浏览 • 1回复 待解决
HarmonyOS 路径动画相关问题
904浏览 • 1回复 待解决
HarmonyOS Grid拖拽动画问题
307浏览 • 1回复 待解决
#鸿蒙通关秘籍#在HarmonyOS Next地图组件中如何使用动画来移动相机位置?
354浏览 • 1回复 待解决
HarmonyOS Tabs 官方示例9,支持在BarMode.Fixed下,下划线支持动画移动到点击的tab下。但是没有支持BarMode.Scrollable模式下,下划线动画移动交互
259浏览 • 1回复 待解决
Ets 手势问题, PanGesture与PinchGesture 如何监听平移方向与捏合是外扩,还是内缩?
2710浏览 • 1回复 待解决
HarmonyOS 组件旋转后,平移的x y轴也跟着变了
148浏览 • 1回复 待解决
HarmonyOS 获取移动UAID
113浏览 • 1回复 待解决
HarmonyOS 动画执行时机问题
465浏览 • 1回复 待解决
HarmonyOS 如何获取移动国家码MCC和移动网号MNC
44浏览 • 1回复 待解决
HarmonyOS list编辑移动效果
319浏览 • 1回复 待解决
关于属性动画的问题?
10322浏览 • 3回复 待解决
加上
对组件进行裁剪、遮罩处理:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5#示例1