logo标签列表

奥列利亚路由动画

aurelia
3
我在每个视图中使用au-animate来实现页面过渡效果：当前视图向左滑出（从中心到左侧），下一个视图向左滑入（从右侧到中心）。
@keyframes slideLeftIn {
  0% {transform: translate(100%, 0);}
  100% {transform: translate(0, 0);}
}
@keyframes slideLeftOut {
  0% {transform: translate(0, 0);}
  100% {transform: translate(-100%, 0);}
}
.pages.au-enter-active {
  animation: slideLeftIn 0.8s;
}
.pages.au-leave-active {
  animation: slideLeftOut 0.8s;
}

基于：Aurelia router view animation with swap-order="with"

现在，我需要在过渡期间在DOM中同时拥有两个视图，就像W3 slide一样。

在aurelia中是否有实现这一点的方法？

更新：

似乎有一个阻止此操作的错误： error aurelia-templating-router 1.0.1 with swap-order

更新2： 在最新版本中，已修复了此错误！Aurelia很棒。

1个回答
1
@keyframes slideLeftIn {
  0% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0); }
  100% {
    -webkit-transform: none;
            transform: none; } }

@keyframes slideLeftOut {
  0% {
    -webkit-transform: none;
            transform: none; }
  100% {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0); } }
谢谢您的回答，当我使用 swap-order="with" 时出现了问题。控制台记录了 ERROR [app-router] TypeError: Cannot read property 'animatableElement' of undefined 的错误，并且当我更改路由器时它会不断添加视图。基本上没有动画。但是使用 swap-order="before" 和 swap-order="after" 可以正常工作，所以可能是个 bug。现在我正在使用 swap-order="after" 进行类似的动画，但是您知道，视图之间存在间隙。 - isar
嗯，swap-order="with" 对我来说运行良好。你在使用 TypeScript 吗？ - Jeff G
我正在使用ES：au new --here，1. Web（默认），1. Babel（默认），3. Sass。此外，au -v为0.23.0。 - isar
使用 swap-order="with" 我看到的是 au-enter au-enter-active，但没有与错误日志相关的 au-leave au-leave-active。所以它不断向 DOM 中添加视图。 - isar
Aurelia在路由即将切换视图时添加au-leave和au-leave-active类。但是，这些视图应该从DOM中移除。你确定这些视图仍然停留在DOM中吗？ - Jeff G
我很确定，而且不只是我遇到了swap-order="with"的问题，正如你可以从我的更新问题中看到的那样。 - isar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接