加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 4动画不适用于Safari iOS 9.3

发布时间:2020-12-17 07:19:07 所属栏目:安全 来源:网络整理
导读:我目前正在所有可能的浏览器中测试我的应用程序,并且我看到角度动画在Safari iOS 9.3中的行为不如预期.下班后 和小时试图解决它我来寻求帮助.提前致谢. 我的代码是: 的package.json "dependencies": { "@angular/animations": "^4.3.2","@angular/cdk": "^2
我目前正在所有可能的浏览器中测试我的应用程序,并且我看到角度动画在Safari iOS 9.3中的行为不如预期.下班后
和小时试图解决它我来寻求帮助.提前致谢.

我的代码是:

的package.json

"dependencies": {
    "@angular/animations": "^4.3.2","@angular/cdk": "^2.0.0-beta.8","@angular/common": "^4.0.0","@angular/compiler": "^4.0.0","@angular/core": "^4.0.0","@angular/forms": "^4.0.0","@angular/http": "^4.0.0","@angular/material": "^2.0.0-beta.8","@angular/platform-browser": "^4.0.0","@angular/platform-browser-dynamic": "^4.0.0","@angular/router": "^4.0.0","@ngx-meta/core": "^0.4.0-rc.2","@ngx-translate/core": "^7.1.0","@ngx-translate/http-loader": "^1.0.1","angular2-moment": "^1.6.0","core-js": "^2.4.1","express": "^4.15.4","lodash": "^4.17.4","ng2-pdf-viewer": "^1.1.1","ng2-translate": "^5.0.0","rxjs": "^5.4.1","web-animations-js": "^2.3.1","zone.js": "^0.8.14"
},

landing.component.ts

import { Component,HostBinding,ChangeDetectionStrategy } from '@angular/core';
import { stateTransition } from '../routing.animations';

@Component({
  selector: 'cp-landing',templateUrl: './landing.component.html',styleUrls: ['./landing.component.css'],changeDetection: ChangeDetectionStrategy.OnPush,animations: [ stateTransition() ]
})
export class LandingComponent {
  @HostBinding('@stateTransition') '';
}

routing.animations.ts

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

export function stateTransition() {
  return trigger('stateTransition',[
    state('void',style({
      transform: 'translateY(50%)',opacity: 0
    })),state('*',style({
      transform: 'translateY(0%)',opacity: 1
    })),// enter animation
    transition('void => *',animate('.5s 500ms')),// exit animation
    transition('* => void',animate('.5s'))
  ]);
}

我试着想出一个小提琴,但我无法重现错误.

我相信网络动画API需要Safari上的polyfill.并且默认情况下不启用.您只需要安装polyfill,然后在app的/ src文件夹中的polyfills.ts文件中添加一行或两行.

见:How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI

(复制下面的最佳答案)

使用较新的Webpack版Angular CLI添加polyfill更容易:

安装时

npm install web-animations-js --save

添加到polyfills.ts:

require('web-animations-js/web-animations.min');

如果我这样做,它也有效

import 'web-animations-js/web-animations.min';

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读