WinJS enterPage 动画未按预期工作答案

【问题标题】：WinJS enterPage animation not working as expectedWinJS enterPage 动画未按预期工作
【发布时间】：2015-03-19 01:58:38
【问题描述】：

我想在页面进入时向我的应用程序添加动画，并与默认的WinJS.UI.Animation.enterPage(element) 挂钩，并且在元素中从右到左滑动效果很好。我需要将它从底部（100px）滑动到顶部。一旦我用WinJS.UI.Animation.enterPage(element, { top: "100px", left: "0px" }) 覆盖了默认值，我的屏幕上根本看不到任何动画，这很奇怪。然而，当与WinJS.UI.Animation.exitPage(oldElement) 结合使用时，动画似乎可以工作，但我想进一步调整时间。

按照https://msdn.microsoft.com/en-us/library/windows/apps/Dn127042(v=win.10).aspx#creating_custom_animations，没有帮助。在使用链接中“组合自定义动画和过渡”的示例后，我只能看到不透明度发生变化和元素淡入，但根本没有翻译。我尝试了与WinJS.UI.Animation.exitPage() 相同的配对，并添加了我自己的customExitPage - 基本上使用WinJS，并且只是不透明......并且没有任何效果。我也指的是这里的一些动画实现 - https://github.com/winjs/winjs/blob/ad8691b3d5227ff1576a5d2a90a42f022498d2a9/src/js/WinJS/Animations.js，控制时间。

还有其他人有这个问题吗？还是我做错了什么……还是 WinJS 表现不佳？

编辑：奇怪的是，enterPage(element, {top: "100px", left: "0px"}) 的“to top”动画开始工作了。然而，自定义动画仍然难以捉摸。

【问题讨论】：

好吧，我终于能够弄清楚“奇怪的行为”。关键帧应该在 CSS 中设置，我正在尝试其他一些事情，显然这就是它不起作用的原因。

标签： javascript animation typescript winjs

【解决方案1】：

好吧，我终于能够弄清楚“奇怪的行为”。 @keyframes 应该在 CSS 中设置，我正在尝试其他一些东西，显然这就是它不起作用的原因。

但是，我可能会说，网站上的解释也可以更清楚一点。

当我们已经在 javascript 中提供 from - to 值时，否则我会再次提供相同的值作为 CSS 的一部分，这仍然很奇怪。

正如网站中提到的，将此添加到 css：@keyframes custom-translate-in { from { transform: translateY(50px); } to { transform: none; } }

并在 js 中有这个： function runCustomShowStoryboard() { return WinJS.UI.executeAnimation( target, { keyframe: "custom-translate-in", property: "transform", delay: 0, duration: 367, timing: "cubic-bezier(0.1, 0.9, 0.2, 1)", from: "translate(50px)", to: "none" }); }

一直无法弄清楚“自下而上”动画开始工作的原因和方式（可能重启 Visual Studio 有所帮助）

【讨论】：