解决 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>
  • 完成!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值