如何为 Aurelia 中的路由器视图更改设置动画？

Question

我是在 Aurelia 中制作动画的新手，无法让它在简单的路线上运行。这是我正在尝试的：

app.html

<template>
    <div style="display:flex; flex-direction: row;flex-grow:1">
       <span style="display:flex" repeat.for="route of router.navigation">
          <a href.bind="route.href">${route.title}</a>
       </span>
    </div>
    <router-view swap-order="with" style="height:300px"></router-view>
</template>

app.js

import {CssAnimator} from 'aurelia-animate-css'

export class App {
  static inject = ["CssAnimator"]
  configureRouter(config,router){
     config.title = "TestApp"
     config.map([
        {route: ['','page1'], name: 'page1', moduleId: './page1', nav: true, title: "Page1"},
        {route: "page2", name: "page2", moduleId: './page2', nav: true, title: "Page2"}
     ]);

   this.router = router;
}

style.css

@keyframes slideLeftIn {
    0% { transform: translate(100%,0)}
    100% { transform: none; }
}

@keyframes slideLeftOut {
    0% { transform: none; }
    100% {transform: translate(-100%, 0); }
}

.viewedit{
    position: absolute;
    left: 0px;
    height: 300px;
}
.viewedit.au-enter-active {
    animation: slideLeftIn 0.8s;
}
.viewedit.au-leave-active {
    animation: slideLeftOut 0.8s;
}

Page1.html

<template>
    <div class="viewedit au-animate">
       <h1>Page 1</h1>
    </div>
</template>

当我点击链接时，我的视图会发生变化，但视图不会滑入和滑出——它们的作用就像任何其他非动画导航一样。

更新

根据 Ashley 的回复，我做了一些更改，如下所示：

ma​​in.js

import 'aurelia-animator-css';  //removed this line as well

export async function configure(aurelia){
   aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin("aurelia-animator-css");
   ...
}

app.js

//removed import and static inject of CssAnimator

package.json

...
},
"dependencies": {
    "aurelia-animator-css":"^1.0.2",  //this line was added
    ...
}

但是，现在当我尝试运行该应用程序时，我在控制台窗口中收到一条错误消息：Unable to find module with ID: aurelia-animator-css，并且我的应用程序永远无法通过“加载”屏幕。

更新 2

因为我使用的是 Aurelia 的 Webpack Skeleton 项目，所以我必须像这样添加插件：

.plugin(PLATFORM.moduleName('aurelia-animator-css'))

Answer 1

您需要将动画制作器安装为插件。然后，au-animate 类将按您的预期工作。您在 main.js 文件中安装插件。它看起来像这样：

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources')
    .plugin('aurelia-animator-css');

  aurelia.start().then(() => aurelia.setRoot());
}

请注意，您需要使用包管理器（NPM 或 JSPM）安装 aurelia-animator-css 插件。注意是aurelia-animatOR-css，不是aurelia-animatE-css。

app.js 中不需要此行，因此您可以将其删除：

 static inject = ["CssAnimator"];

完成此操作后，一切都应按预期开始工作。