Question

我正在尝试在路线更改之间添加动画。

我的代码如下：

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [
    './app.css'
  ],
  template: totTemplate,
  host: {
    '[@routeAnimation]': 'true',
    '[style.display]': "'block'",
    '[style.position]': "'absolute'"
  },
  animations: [
    trigger('routerAnimations', [
      state('*', style({transform: 'translateX(0)', opacity: 1})),
      transition('void => *', [
        style({transform: 'translateX(-100%)', opacity: 0}),
        animate(1000)
      ]),
      transition('* => void', animate(1000, style({transform: 'translateX(100%)', opacity: 0})))
    ])
  ]
})

Html如下：

<router-outlet [@routerAnimations]="myOutlet.state" #myOutlet></router-outlet>

但它会抛出以下错误：

main.prod.bundle.js:10 Error: Template parse errors:
Couldn't find an animation entry for "routeAnimation" ("[ERROR ->]<app></app>"): e_Host@0:0, Directive e
    at t.parse (http://localhost:5003/static/vendor.prod.bundle.js:10:471)
    at t._compileTemplate (http://localhost:5003/static/vendor.prod.bundle.js:18:9374)
    at http://localhost:5003/static/vendor.prod.bundle.js:18:6947
    at Set.forEach (native)
    at t._compileComponents (http://localhost:5003/static/vendor.prod.bundle.js:18:6918)
    at i (http://localhost:5003/static/vendor.prod.bundle.js:18:4557)
    at t.invoke (http://localhost:5003/static/polyfills.prod.bundle.js:2:26661)
    at e.run (http://localhost:5003/static/polyfills.prod.bundle.js:2:24048)
    at http://localhost:5003/static/polyfills.prod.bundle.js:2:22150
    at t.invokeTask (http://localhost:5003/static/polyfills.prod.bundle.js:2:27290)(anonymous function) @ main.prod.bundle.js:10t.invoke @ polyfills.prod.bundle.js:2e.run @ polyfills.prod.bundle.js:2(anonymous function) @ polyfills.prod.bundle.js:2t.invokeTask @ polyfills.prod.bundle.js:2e.runTask @ polyfills.prod.bundle.js:2i @ polyfills.prod.bundle.js:2invoke @ polyfills.prod.bundle.js:2

Answer 1

在您的模板路由器插座中，您有 @routerAnimations ，但在您的组件中，您在主机中写了 @routeAnimation （缺少＆＃39; s＆＃39;）。可能这就是问题所在。

找不到“routeAnimation”的动画条目（“[ERROR - ＆gt;] <app> </app>”）：e_Host @ 0：0，指令e

1 个答案: