NativeScript / NativeScript/angular
Problems with 'translate' angular animations in Angular 14
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 55
- 派生
- 13
- 平均合并
- 16 分钟
- 30 天内合并 PR
- 1
描述
There are a number of issues that arise in Angular animations that contain 'translate' styles, but only on Angular 14.
I've created a demo app to demonstrate this:
https://stackblitz.com/edit/nativescript-stackblitz-templates-guamwx
If you switch out the package.json with package-13.json, these problems basically go away.
First of all, the translate animations don't seem to work at all on Android.
You will notice if you run in Android, the translation animations don't run when using angular 14, but they do work on angular 13.
Next, the done even does not run when the animation completes.
Running on iOS, you'll see that the translate animations run, but the done event does not get triggered until the start of the next animation. (You can see this in the console, where the start and end events are logged.). Again, if you switch to use angular 13, these problems go away.
(@animationTransition.done)="animationTriggerEnd()"
In the demo project, animationTriggerEnd() is not run until the next animation begins. However, if you remove the translate animations, the events fire normally:
` transition(
(fromState, toState) => fromState < toState,
[
style({ opacity: 0 }),
animate('400ms ease-out', style({ opacity: 1 }))
]
),`
Lastly, some translate animations just don't work.
If on iOS you switch the translate animations to go from 0 to +/- 100%, the animation doesn't happen: the box just jumps.
` transition(
(fromState, toState) => fromState < toState,
[
style({ opacity: 0, transform: "translateX(0)" }),
animate('400ms ease-out', style({ opacity: 1, transform: "translateX(100%)" }))
]
),`
But if you do this same animation on Angular 13, the animation runs normally.
I'm not sure what's causing all of these issues, but they seemed to appear when Angular 14 came out. I've been trying to work around them, but I haven't been able to find a way yet.
What is causing these issues, and can they be corrected?
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从链接的 StackBlitz 演示开始,将 package.json 与 package-13.json 进行比较,并在 Android 和 iOS 上运行 translate 动画。跟踪 @animationTransition.done 处理程序以及演示所使用的 translate 样式。完成的标准是 translate 动画在两个平台上都能运行,并且完成事件会在每个动画结束时触发,与 Angular 13 的行为一致。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend, mobile-dev
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100