使用Safari 11.1.1中的Angular 6.0.1不更改状态的动画，特别是尝试更改底部属性

下面的fab-menu.component.ts带有动画代码

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
} from '@angular/animations';

@Component({
  selector: 'app-fab-menu',
  templateUrl: './fab-menu.component.html',
  styleUrls: ['./fab-menu.component.css'],
  animations: [
    trigger('labelState', [
      state('out', style({
        transform: 'scale(1, 1)',
        'transform-origin': '100% 0%'
      })),
      state('in', style({
        transform: 'scale(0,1)',
        'transform-origin': '100% 0%'
      })),
      transition('out => in', animate('100ms ease-in')),
      transition('in => out', animate('100ms ease-out'))
    ]),
    trigger('buttonRotationState', [
      state('rotated', style({
        transform: 'rotate(-45deg)',
        'transform-origin': '50% 50%'
      })),
      state('straight', style({
        transform: 'rotate(0deg)',
        'transform-origin': '50% 50%'
      })),
      transition('rotated => straight', animate('100ms ease-in')),
      transition('straight => rotated', animate('100ms ease-out'))
    ]),
    trigger('fabItem1State', [
      state('up', style({ 'bottom': '120px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ]),
    trigger('fabItem2State', [
      state('up', style({ 'bottom': '170px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ]),
    trigger('fabItem3State', [
      state('up', style({ 'bottom': '220px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ]),
    trigger('fabItem4State', [
      state('up', style({ 'bottom': '270px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ]),
    trigger('fabItem5State', [
      state('up', style({ 'bottom': '320px'})),
      state('down', style({ 'bottom': '47px'})),
      transition('down => up', animate('100ms ease-in')),
      transition('up => down', animate('100ms ease-out'))
    ])
  ]
})

export class FabMenuComponent implements OnInit {
  public label_state = 'in';
  public fab_item_state = 'up';
  public menu_button_state = 'straight';
  @Input() buttonOneTitle;
  @Input() buttonTwoTitle  = '';
  @Input() buttonThreeTitle  = '';
  @Input() buttonFourTitle  = '';
  @Input() buttonFiveTitle  = '';

  @Output() clickedButton1: EventEmitter<number> = new EventEmitter();
  @Output() clickedButton2: EventEmitter<number> = new EventEmitter();
  @Output() clickedButton3: EventEmitter<number> = new EventEmitter();
  @Output() clickedButton4: EventEmitter<number> = new EventEmitter();
  @Output() clickedButton5: EventEmitter<number> = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

  openMenu() {
    this.label_state = this.label_state === 'out' ? 'in' : 'out';
    this.menu_button_state = this.menu_button_state === 'rotated' ? 'straight' : 'rotated';
    console.log('expanding');
  }
  collapseItem($event) {
    this.fab_item_state = this.fab_item_state === 'up' ? 'down' : 'up';
    console.log('collapse');
  }

  button1Clicked() {
    this.clickedButton1.emit(1);
  }
  button2Clicked() {
    this.clickedButton2.emit(2);
  }
  button3Clicked() {
    this.clickedButton3.emit(3);
  }
  button4Clicked() {
    this.clickedButton4.emit(4);
  }
  button5Clicked() {
    this.clickedButton5.emit(5);
  }
}

导入{
组成部分，
奥尼特，
输入，
产出，
EventEmitter}来自“@angular/core”；
进口{
触发
国家,，
风格
使有生气
过渡，
}来自“@angular/animations”；
@组成部分({
选择器：“应用程序制作菜单”，
templateUrl:“./fab menu.component.html”，
样式URL:['./fab menu.component.css']，
动画：[
触发器（'labelState'[
状态（'out'，风格({
变换：“缩放（1，1）”，
“转换原点”：“100%0%”
})),
状态（'in'，风格）({
变换：“缩放（0,1）”，
“转换原点”：“100%0%”
})),
过渡（'out=>in'，动画（'100ms缓进'），
过渡（'in=>out'，动画（'100ms减缓输出'））
]),
触发器（'buttonRotationState'[
状态（'旋转'），样式({
变换：“旋转（-45度）”，
“转换原点”：“50%50%”
})),
状态（'直'），样式({
变换：“旋转（0度）”，
“转换原点”：“50%50%”
})),
过渡（'旋转=>直线'，动画（'100毫秒缓进'），
过渡（'直线=>旋转'，动画（'100毫秒放松'）
]),
触发器（'fabItem1State'[
状态（'up'，样式（{'bottom'：'120px'}）），
状态（'down'，样式（{'bottom'：'47px'}）），
过渡（'down=>up'，动画（'100ms慢进'），
过渡（'up=>down'，设置动画（'100ms减缓'））
]),
触发器（'fabItem2State'[
状态（'up'，样式（{'bottom'：'170px'}）），
状态（'down'，样式（{'bottom'：'47px'}）），
过渡（'down=>up'，动画（'100ms慢进'），
过渡（'up=>down'，设置动画（'100ms减缓'））
]),
触发器（'fabItem3State'[
状态（'up'，样式（{'bottom'：'220px'}）），
状态（'down'，样式（{'bottom'：'47px'}）），
过渡（'down=>up'，动画（'100ms慢进'），
过渡（'up=>down'，设置动画（'100ms减缓'））
]),
触发器（'fabItem4State'[
状态（'up'，样式（{'bottom'：'270px'}）），
状态（'down'，样式（{'bottom'：'47px'}）），
过渡（'down=>up'，动画（'100ms慢进'），
过渡（'up=>down'，设置动画（'100ms减缓'））
]),
触发器（'fabItem5State'[
状态（'up'，样式（{'bottom'：'320px'}）），
状态（'down'，样式（{'bottom'：'47px'}）），
过渡（'down=>up'，动画（'100ms慢进'），
过渡（'up=>down'，设置动画（'100ms减缓'））
])
]
})
导出类FabMenuComponent实现OnInit{
公共标签_state='in'；
公共生产项目状态='up'；
公共菜单按钮状态='直接'；
@输入（）按钮和标题；
@Input（）按钮wotitle=''；
@Input（）按钮标题=“”；
@Input（）按钮furtTitle=''；
@Input（）按钮标题=“”；
@Output（）clickedButton1:EventEmitter=新的EventEmitter（）；
@Output（）clickedButton2:EventEmitter=新的EventEmitter（）；
@Output（）clickedButton3:EventEmitter=新的EventEmitter（）；
@Output（）clickedButton4:EventEmitter=新的EventEmitter（）；
@Output（）clickedButton5:EventEmitter=新的EventEmitter（）；
构造函数（）{}
恩戈尼尼特（）{
}
openMenu（）{
this.label_state=this.label_state=='out'？'in'：'out'；
this.menu_button_state=this.menu_button_state===‘旋转’？‘直线’：‘旋转’；
console.log（'expanding'）；
}
collapseItem（$事件）{
this.fab_item_state=this.fab_item_state==='up'？'down'：'up'；
console.log（'collapse'）；
}
按钮1单击（）{
点击按钮1.发射（1）；
}
button2Clicked（）{
点击按钮2.发射（2）；
}
按钮3clicked（）{
点击按钮3.发射（3）；
}
按钮4单击（）{
点击按钮4.发射（4）；
}
按钮5clicked（）{
点击按钮5.发射（5）；
}
}

更具体地说，在Safari中使用此代码时，转换不会改变，尽管它们在Chrome中工作正常

下面是html代码

<div class="fab-menu-body">
<div id="menu-item-one" class="menu-item" [@fabItem1State]="fab_item_state">
    <mat-label (@labelState.done)="collapseItem($event)" [@labelState]="label_state">{{buttonOneTitle}}</mat-label>
    <button id="menu-button-one" mat-mini-fab mat-icon-button (click)="button1Clicked(1)"></button>
</div>
<div id="menu-item-two" class="menu-item" [@fabItem2State]="fab_item_state">
    <mat-label [@labelState]="label_state">{{buttonTwoTitle}}</mat-label>
    <button id="menu-button-two" mat-mini-fab mat-icon-button (click)="button2Clicked(2)"></button>
</div>
<div id="menu-item-three" class="menu-item" [@fabItem3State]="fab_item_state">
    <mat-label [@labelState]="label_state">{{buttonThreeTitle}}</mat-label>
    <button id="menu-button-three" mat-mini-fab mat-icon-button (click)="button3Clicked(3)"></button>
</div>
<div id="menu-item-four" class="menu-item" [@fabItem4State]="fab_item_state">
    <mat-label [@labelState]="label_state">{{buttonFourTitle}}</mat-label>
    <button id="menu-button-four" mat-mini-fab mat-icon-button></button>
</div>
<div id="menu-item-five" class="menu-item" [@fabItem5State]="fab_item_state">
    <mat-label [@labelState]="label_state">{{buttonFiveTitle}}</mat-label>
    <button id="menu-button-five" mat-mini-fab mat-icon-button></button>
</div>
<div>
    <button [@buttonRotationState]='menu_button_state' id="menu-button" mat-fab aria-label="Menu" (click)='openMenu()'>
  <mat-icon>add</mat-icon>
</button>
</div>

{{buttoneTitle}}
{{buttonTwoTitle}}
{{buttonThreeTitle}}
{{buttonfurtitle}}
{{buttonFiveTitle}}
添加

任何帮助都将不胜感激！ 尽管Angular 6不再需要web动画js，但这不再准确了吗？当按下按钮时，菜单项应向上跳，然后再次按下时向下返回，以“折叠菜单”。 提前谢谢