javascript - WinJS enterPage动画未按预期工作

我想在页面输入中为我的应用添加动画，并使用默认的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"})的“顶部”动画开始工作。然而，自定义动画仍然难以捉摸。

好吧，我终于弄明白了“奇怪的行为”。 @keyframes应该已经在CSS中设置了，我正在尝试其他一些事情，显然这就是它无效的原因。

但是，我可能会说在网站上的解释可能会更加清晰。

当我们已经在javascript中提供from - to值时，我还会提供相同的CSS作为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" }); }

从来没有弄清楚为什么以及如何从“自下而上”动画开始工作（可能重启视觉工作室有帮助）

WinJS enterPage动画未按预期工作

1 个答案: