动画不保持最终状态，切换回原始状态答案

【问题标题】：Animation doesnt keep final state, switches back to original state动画不保持最终状态，切换回原始状态
【发布时间】：2019-01-30 17:16:04
【问题描述】：

我目前正在学习 Angular 6，但遇到了一些问题。我正在使用本教程：https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html

当我单击按钮时，动画按预期触发，但在淡出后文本再次弹出。任何想法为什么它会切换回原始状态？

提前致谢

app.component.html

<button (click)="toggle()">Toggle Fade</button>
<div [@someCoolAnimation]="bindingVar">hello there</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('someCoolAnimation', [
      transition('* => fadeIn', [
        style({ opacity: 0 }),
        animate(1000, style({ opacity: 1 }))
      ]),
      transition('* => fadeOut', [
        animate(1000, style({ opacity: 0 }))
      ])
    ])
  ]
})
export class AppComponent {
  bindingVar = '';
  fadeIn() {
    this.bindingVar = 'fadeIn';
  }
  fadeOut() {
    this.bindingVar = 'fadeOut';
  }
  toggle() {
    this.bindingVar == 'fadeOut' ? this.fadeIn() : this.fadeOut();
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

标签： angular angular-animations

【解决方案1】：

我的问题是由于在需要它的末尾设置了一个没有px 的值。

此 BREAKS - 在动画结束后将边距重置为初始值：

state('open', style({
    marginLeft: '-100'
}))

这工作！！！

state('open', style({
    marginLeft: '-100px'
}))

【讨论】：

【解决方案2】：

您正在从角度动画中寻找state。当动画处于给定状态时，它将强制执行样式。您可以在这里查看官方示例https://angular.io/guide/animations#transitioning-between-two-states

确保导入状态

import { ... state } from '@angular/animations';

状态是这样使用的

animations: [
    trigger('someCoolAnimation', [
      state('fadeIn'
      //enforce your styles for the fadeIn state here
          style({ opacity: 1 })
      ),
      state('fadeOut'
      //enforce your styles for fadeOut state here
          style({ opacity: 0 })
      )
      transition('* => fadeIn', [
        animate(1000)
      ]),
      transition('* => fadeOut', [
        animate(1000)
      ])
    ])
  ]

【讨论】：