Angular 4.4.6 анимация перехода не происходит - PullRequest
Новая
       8

Angular 4.4.6 анимация перехода не происходит

0 голосов
/ 29 апреля 2018

Я пытаюсь добавить очень простую анимацию в мое приложение Angular 4.4.6. Когда анимация запускается, переход к новому стилю CSS происходит мгновенно. Я вижу новые свойства CSS, но анимированный переход между двумя состояниями отсутствует.

Я застрял на этом часами!

Я также включил polyfill web-animations-js

Модуль приложения 

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

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

Мой компонент 

@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

HTML-шаблон 

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

Package.json 

"@angular/animations": "4.4.6",
"@angular/cdk": "2.0.0-beta.12",
"@angular/common": "4.4.6",
"@angular/compiler": "4.4.6",
"@angular/core": "4.4.6",
"@angular/forms": "4.4.6",
"@angular/material": "2.0.0-beta.12",
"@angular/http": "4.4.6",
"@angular/platform-browser": "4.4.6",
"@angular/platform-browser-dynamic": "4.4.6",
"@angular/router": "4.4.6",
"@liwebcorp/tron": "1.0.0",
"bootstrap": "3.3.7",
"browserslist": "^2.4.0",
"classlist.js": "^1.1.20150312",
"core-js": "2.5.1",
"highcharts": "^6.0.3",
"jquery": "^3.2.1",
"ng2-auto-complete": "0.12.0",
"ng2-bootstrap-modal": "^1.0.1",
"ng2-daterangepicker": "2.0.7",
"ng2-drag-drop": "2.9.2",
"ng2-toastr": "^4.1.2",
"ng2-tooltip-directive": "^1.2.3",
"ngx-file-drop": "^2.0.4",
"ngx-malihu-scrollbar": "^1.3.1",
"popper.js": "1.12.9",
"rxjs": "5.5.2",
"web-animations-js": "^2.3.1",
"zone.js": "0.8.17"

Большое спасибо за вашу помощь !!

1 Ответ

0 голосов
/ 29 апреля 2018 
style({ width: '*' })

не является допустимой шириной и, вероятно, возвращается к auto или initial, когда фактически отображается в браузере. И auto не включен в спецификации перехода css. Вам необходимо установить его значение (вероятно, 100) 

style({ width: 100 })
...