Question

我试图在我的Angular 4.4.6应用中添加一个非常简单的动画。触发动画时，转换到新的CSS样式是即时的。我可以看到新的CSS属性，但两个状态之间没有动画过渡。

我被困在这几个小时！

我还启用了polyfill web-animations-js

应用模块

    var descriptor = UIFontDescriptor.GetPreferredDescriptorForTextStyle(UIFontTextStyle.Caption2);
    att = descriptor.FontAttributes;
    att.Traits = new UIFontTraits {Weight = (float?)UIFontWeightConstants.Light};
    font = UIFont.FromDescriptor(descriptor, 0);
    //t = font.DebugDescription;

我的组件

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

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

HTML模板

@Component({
  selector: 'app-test-anim',
  templateUrl: './test.component.html',
  styleUrls: [ './test.component.css' ],
  animations: [
    trigger('collapse', [
      state('open', style({ width: '*' })),
      state('close', style({ width: 0 })),
      transition('open => close', [
        style({ width: '*' }),
        animate(2000, style({ width: 0 }))
      ]),
      transition('close => open', [
        style({ width: 0 }),
        animate(2000, style({ width: '*' }))
      ])
    ])
  ]
})
export class TestComponent implements AfterViewInit  {
  isOpen = true;
  get collapseState() {
    return this.isOpen ? 'open' : 'close';
  }

// REST OF THE COMPONENT

的package.json

<button (click)="toggle()">Toggle</button>
<h2>Without AnimationBuilder:</h2>
<div class="container" [@collapse]="collapseState"></div>

非常感谢你的帮助!!

Answer 1

style({ width: '*' })

不是有效宽度，并且在浏览器中实际呈现时可能会恢复为auto或initial。并且auto未包含在css转换规范中。您需要将其设置为一个值（可能是100）

style({ width: 100 })

Answer 2

在您的html模板中，尝试切换isOpen标志。

<button (click)="isOpen=!isOpen">Toggle</button>
<h2>Without AnimationBuilder:</h2>
<div class="container" [@collapse]="collapseState"></div>

在组件中，从过渡和动画中移除样式。

animations: [
  trigger('collapse', [
    state('open', style({ width: '*' })),
    state('close', style({ width: 0 })),
    transition('open => close', [
      animate(2000)
    ]),
    transition('close => open', [
      animate(2000)
    ])
  ])
]

Angular 4.4.6动画过渡并没有发生

2 个答案: