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的回应，我做了一些改变：

main.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我的应用程序永远不会超过＆＃34; loading＆＃34;屏幕。

更新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"];

一旦你这样做，一切都应该按照你的预期开始工作。

如何在Aurelia中为路由器视图视图设置动画？

1 个答案: