时间戳

首页 > 解决方案 > 页面加载时出错，提供的动画触发器“动画”尚未注册

angular - 页面加载时出错，提供的动画触发器“动画”尚未注册

问题描述

我刚刚将我的 web 应用程序项目从 angular 4 更新到了 angular 7，我在页面加载时遇到了动画触发器的问题（ngOnInIt 方法）。我需要支持与 angular 4 和 angular 7 相同的动画效果

我已将触发器添加到我的 app.module.ts 但我仍然无法解决错误

角 4

import {animateFactory } from 'ack-angular-fx'

.ts 文件

@Component({
   selector: 'abc',
   templateUrl: './abc.component.html',
   styleUrls: ['./abc.component.css'],
   animations: [animateFactory(480, 200, 'ease-in', 100, 'animate')]
})

.html 文件

<div [@animate]="'zoomIn'">
</div>

角 7

.ts

import { trigger, transition, useAnimation } from '@angular/animations';
import { bounce, zoomIn } from 'ngx-animate';

@component({
  animations: [
        trigger('bounce', [transition('* => *', useAnimation(zoomIn))])
    ],
})

.html

<div [@animate]="'zoomIn'"></div>

我得到的实际错误消息是 

Error: The provided animation trigger "animate" has not been registered!
    at AnimationTransitionNamespace.push../node_modules/@angular/animations/fesm5/browser.js.AnimationTransitionNamespace._getTrigger (http://us-test-abc.ils.local:5555/vendor.js:3668:19)
    at AnimationTransitionNamespace.push../node_modules/@angular/animations/fesm5/browser.js.AnimationTransitionNamespace.trigger (http://us-test-abc.ils.local:5555/vendor.js:3675:28)
    at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.trigger (http://us-test-abc.ils.local:5555/vendor.js:4093:20)
    at InjectableAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.process (http://us-test-abc.ils.local:5555/vendor.js:5093:36)
    at AnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.AnimationRenderer.setProperty (http://us-test-abc.ils.local:5555/vendor.js:73490:29)
    at setElementProperty (http://us-test-abc.ils.local:5555/vendor.js:62483:19)
    at checkAndUpdateElementValue (http://us-test-abc.ils.local:5555/vendor.js:62434:13)
    at checkAndUpdateElementInline (http://us-test-abc.ils.local:5555/vendor.js:62383:24)
    at checkAndUpdateNodeInline (http://us-test-abc.ils.local:5555/vendor.js:64732:20)
    at checkAndUpdateNode (http://us-test-abc.ils.local:5555/vendor.js:64698:16)

标签： angulartypescriptanimationangular7

解决方案

你的触发器被调用bounce（正如你定义的那样，

animations: [
      trigger('bounce', [transition('* => *', useAnimation(zoomIn))])
],

)，所以你div应该看起来像这样<div [@bounce]="'zoomIn'"></div>。

试试这个，如果它仍然给你带来麻烦，请告诉我。

推荐阅读