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

Question

我是新来的奥里利亚动画制作公司，无法让它在简单的路线上工作。这里就是我想：

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> 

我的看法改变，我点击链接，但意见不滑动进出 - 他们只是像任何其他非动画导航。

更新

基于阿什利的回应，我已经像一些变化，使：

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和我的应用程序永远不会越过“加载”屏幕。

更新2

因为我用的是从Aurelia路上的骷髅的WebPack项目，我不得不添加插件，像这样：

.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"]; 

一旦你这样做，一切都应该开始像您期望的工作。