离子 3 浏览器动画模块

Question

我尝试在我的项目中导入 BrowserAnimaionModule

1- 我安装 npm install web-animations-js @angular/animations@4.0.0 --save

2- 我在 main.ts 中导入 polyfill

导入'web-animations-js/web-animations.min';

3- 当我尝试将 app.module.ts 中的 BrowserAnimationModule 添加到 imports[]

这是登录表单的js代码

 import { Component, trigger, state, style, transition, animate, keyframes } from '@angular/core';
  ;
     
    @Component({
      selector: 'page-login',
      templateUrl: 'login-page.html',
     
      animations: [
     
        //For the logo
        trigger('flyInBottomSlow', [
          state('in', style({
            transform: 'translate3d(0,0,0)'
          })),
          transition('void => *', [
            style({transform: 'translate3d(0,2000px,0'}),
            animate('2000ms ease-in-out')
          ])
        ]),
     
        //For the background detail
        trigger('flyInBottomFast', [
          state('in', style({
            transform: 'translate3d(0,0,0)'
          })),
          transition('void => *', [
            style({transform: 'translate3d(0,2000px,0)'}),
            animate('1000ms ease-in-out')
          ])
        ]),
     
        //For the login form
        trigger('bounceInBottom', [
          state('in', style({
            transform: 'translate3d(0,0,0)'
          })),
          transition('void => *', [
            animate('2000ms 200ms ease-in', keyframes([
              style({transform: 'translate3d(0,2000px,0)', offset: 0}),
              style({transform: 'translate3d(0,-20px,0)', offset: 0.9}),
              style({transform: 'translate3d(0,0,0)', offset: 1}) 
            ]))
          ])
        ]),
     
            })
        
    }

我收到了这个错误 对象原型只能是 Object 或 null：未定义

Answer 1

您正在从错误的库中导入触发器、状态、样式、过渡、动画、关键帧。

import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';  // not @angular/core