Question

我在Angular 6中有以下动画。

slide-in-out-animation.ts

    // import the required animation functions from the angular animations module
import { trigger, state, animate, transition, style } from '@angular/animations';

export const slideInOutAnimation =
  // trigger name for attaching this animation to an element using the [@triggerName] syntax
  trigger('slideInOutAnimation', [

    // end state styles for route container (host)
    state('*', style({
      // the view covers the whole screen with a semi tranparent background
      position: 'fixed',
      zIndex: 6,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.8)'
    })),

    // route 'enter' transition
    transition(':enter', [

      // styles at start of transition
      style({
        // start with the content positioned off the right of the screen, 
        // -400% is required instead of -100% because the negative position adds to the width of the element
        right: '-400%',
        zIndex: 6,

        // start with background opacity set to 0 (invisible)
        backgroundColor: 'rgba(0, 0, 0, 0)'
      }),

      // animation and styles at end of transition
      animate('.5s ease-in-out', style({
        // transition the right position to 0 which slides the content into view
        right: 0,
        zIndex: 6,

        // transition the background opacity to 0.8 to fade it in
        backgroundColor: 'rgba(0, 0, 0, 0.8)'
      }))
    ]),

    // route 'leave' transition
    transition(':leave', [
      // animation and styles at end of transition
      animate('.5s ease-in-out', style({
        zIndex:6,
        // transition the right position to -400% which slides the content out of view
        right: '-400%',

        // transition the background opacity to 0 to fade it out
        backgroundColor: 'rgba(0, 0, 0, 0)'
      }))
    ])
  ]);

当我要在组件中使用动画时：

    @Component({
      selector: 'app-example-edit',
      templateUrl: './example-edit.component.html',
      styleUrls: ['./example-edit.component.css'],

      // make slide in/out animation available to this component
      animations: [slideInOutAnimation],

      // attach the slide in/out animation to the host (root) element of this component
      host: { '[@slideInOutAnimation]': '' }
    })
export class ExampleComponent {

}

在parent-component.html中我有html

<a href="#" routerLink="add">Add</a>
<div class="view-side-form">
  <router-outlet></router-outlet>
</div>

在parentcomponent中，我有一个添加元素的链接。当用户单击链接时。 examplecomponent的内容是使用动画加载的。在chrome中工作完美。但是在Internet Explorer中，动画无法正常工作。此外，在Chrome和IE中使用Angular5，动画效果也非常完美。问题是当我想与Angular 6一起使用时。

这是我的package.json文件

{
  "name": "app-web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.3.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.3.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@types/jquery": "^3.3.4",
    "angular2-moment": "^1.9.0",
    "angular2-multiselect-dropdown": "^2.9.0",
    "angular2-toaster": "^6.1.0",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "ng2-bs3-modal": "^0.15.0",
    "ng2-charts": "^1.6.0",
    "ng2-datetime": "^1.4.0",
    "ngx-bootstrap": "^3.0.1",
    "rxjs": "^6.0.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

polyfills.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

我正在使用从链接Angular 2/5 - Router Animation Tutorial & Example创建的动画。在Angular5中，它在所有浏览器中都能完美运行，但是当我想迁移到Angular6时，我遇到了IE问题。

Answer 1

Angular 6动画要求您启用IE和Edge的polyfill，其中a section in the Angular Docs与这些设置有关，这是要点：

在项目根目录的polyfills.ts中取消注释以下行：

导入'web-animations-js';
安装网络动画npm软件包：

npm install web-animations-js

Answer 2

相应的Github issue已通过Pull Request进行了解析，并将合并到尚未确定的Angular未来版本中。

Answer 3

因此，在IE Edge中，我已经弄清楚了是否使用了keyframes函数。如果您用此替换 slide-in-out-animation.ts 中的slideInOutAnimation常量。 Demo (edited from Pablo's example)

export const slideInOutAnimation =
  trigger('slideInOutAnimation', [
    state('*', style({
      position: 'fixed',
      zIndex: 6,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.8)'
    })),
    transition(':enter', [
      style({
        right: '-400%',
        backgroundColor: 'rgba(0, 0, 0, 0)'
      }),
      animate('.5s ease-in-out', keyframes([
        style({
          right: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.8)'
        })
      ]))
    ]),
    transition(':leave', [
      animate('.5s ease-in-out', keyframes([
        style({
          right: '-400%',
          backgroundColor: 'rgba(0, 0, 0, 0)'
        })
      ]))
    ])
  ]);

Angular 6动画在IE中不起作用

3 个答案: