解决 Angular2/Ionic2 微信动画报错问题

by wilhan.tian 欢迎转载，转载请注明出处

正确的代码，错误的信息

废话不说，看代码！
animations.com.html

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

@Component({
    templateUrl: 'build/pages/animations/animations.com.html',
    animations: [trigger("animationState", [
        state("fuck", style({
            transform: "scale(1)"
        })),
        state("noFuck", style({
            transform: "scale(1.5)"
        })),
        transition('fuck => noFuck', animate('100ms cubic-bezier(1,1.5,0,1)')),
        transition('noFuck => fuck', animate('100ms ease-out'))
    ])]
})
export class AnimationsPage{
    private state: string = "fuck";

    public constructor(){
    }

    public onButtonClick(){
        if(this.state == "fuck"){
            this.state = "noFuck";
        }
        else{
            this.state = "fuck"
        }
    }
}

animations.com.html:

<ion-header>
    <ion-navbar>
        <ion-title>Animations动画</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding text-center>
    <img @animationState="state" (click)="onButtonClick()" src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
    <p>请点击Logo</p>
</ion-content>

很简单有木有？！Chrome、Safari、Android的WebKit都好用，可到了微信X5浏览器上，报错！！！

通过微信提供的调试工具，捕捉到如下错误信息：

EXCEPTION: Error in build/pages/animations/animations.com.html:7:9 browser_adapter.js:93
EXCEPTION: Error in build/pages/animations/animations.com.html:7:9 browser_adapter.js:84
ORIGINAL EXCEPTION: TypeError: undefined is not a function browser_adapter.js:84
ORIGINAL STACKTRACE: browser_adapter.js:84
TypeError: undefined is not a function
    at WebAnimationsPlayer.play (http://192.168.1.177:8100/build/js/app.bundle.js:46354:69)
    at AnimationSequencePlayer.play (http://192.168.1.177:8100/build/js/app.bundle.js:24708:79)
    at DebugAppView.AppView.registerAndStartAnimation (http://192.168.1.177:8100/build/js/app.bundle.js:31893:16)
    at AnimationsPage_animationState_0_factory (AnimationsPage.template.js:34:8)
    at DebugAppView._View_AnimationsPage0.detectChangesInternal (AnimationsPage.template.js:190:5)
    at DebugAppView.AppView.detectChanges (http://192.168.1.177:8100/build/js/app.bundle.js:32060:14)
    at DebugAppView.detectChanges (http://192.168.1.177:8100/build/js/app.bundle.js:32165:44)
    at DebugAppView.AppView.detectViewChildrenChanges (http://192.168.1.177:8100/build/js/app.bundle.js:32086:19)
    at DebugAppView.AppView.detectChangesInternal (http://192.168.1.177:8100/build/js/app.bundle.js:32071:14)
    at DebugAppView.AppView.detectChanges (http://192.168.1.177:8100/build/js/app.bundle.js:32060:14) browser_adapter.js:84
ERROR CONTEXT: browser_adapter.js:84
DebugContext {_view: _View_AnimationsPage0, _nodeIndex: 11, _tplRow: 7, _tplCol: 9, _staticNodeInfo: (...)…} 

WTF？！辣鸡疼讯，让我们做前端的不得好死啊？这是哪门子错误？

初步怀疑报错是『动画』引起，因为我啥也没写啊…

尝试

歪打正着，在Angular2的官方网站发现[动画章节]

有两句话提到：

Angular animations are built on top of the standard Web Animations API and they run natively on browsers that support it.

Angular 动画是基于标准的 Web 动画 API(Web Animations API) 构建的，它们在 支持此 API 的浏览器中 会用原生方式工作。

For other browsers, a polyfill is required. Grab web-animations.min.js from here and add it to your page.

至于其它浏览器，就需要一个填充库 (polyfill) 了。你可以 从这里获取 web-animations.min.js ，并把它加入你的页面中。

死马当活马医，从github上download了一份web-animations-js，并加入到我的index.html中。

奇迹出现了！不会再报错，动画也播放正常！

解决方案

打入Web Animations API的兼容补丁即可

• 下载web-animations-js
• 在index.html中引入<script src="build/js/web-animations.min.js"></script>
• 完成！

---