Angular2動畫:: Easings無法按預期方式工作

我正在研究可摺疊組件，其中一個可以通過單擊來上/下顯示/隱藏詳細信息。該組件如下：Angular2動畫:: Easings無法按預期方式工作

// component.ts 

import {Component, Directive, Input} from '@angular/core'; 
import {trigger, state, style, transition, animate} from '@angular/core' 

@Component({ 
    selector: 'expandable', 
    template: '<div *ngIf="isExpanded" @animate="'slide'"><ng-content></ng-content></div>', 
    animations: [ 
     trigger('animate', [ 
      state('slide', style({ overflow: 'hidden', height: '*' })), 
      transition('slide => void', [animate('200ms ease-out', style({ height: 0 }))]), 
      transition('void => slide', [style({ height: 0 }), animate('200ms ease-out', style({ height: '*' }))]) 
     ]) 
    ] 
}) 
export class SimExpandable { 

    private _expanded: boolean = false; 

    @Input('expanded') set expanded(value: string | boolean) { 
     this._expanded = (value === 'true' || value === true); 
    } 

    get isExpanded(): boolean { return this._expanded } 

}

該組件工作正常，部分。但是，動畫並不完美。我已經將組件配置爲使用動畫ease-out，但實際上，組件呈線性動畫。

我使用ease-out，easeOut，ease-out-cubic，easeOutCubic，ease-in-out，easeInOut，bounce，和許多其他的排列，但組件仍動畫線性嘗試。我真的需要使用ease-out爲我的組件。任何幫助將非常感激。

來源

2016-07-08 AweSIM

您是否添加了[web-animations.js polyfill]（https://github.com/web-animations/web-animations-js）？ – PierreDuc

該angular2文檔狀態，你不需要將其添加到常見的瀏覽器..即時通訊使用鉻進行測試..但我可以明確地添加它.. – AweSIM

沒有運氣，或者.. =（ – AweSIM

-2

Animate不再是angular/core中的一部分..因此您必須導入它，它是ngAnimate模塊的一部分。所以要使用需要導入js/lib/angular-animate的$ animate服務。 js庫。

bower install --save angular-animate

來源

2016-07-08 09:28:50 Palm

你指的是Angular2或更老的Angular v1？ – AweSIM

我正在使用最新版本，然後在css中使用-enter和leave，然後在那裏應用easile-stuff。就像這樣https://docs.angularjs.org/api/ngAnimate – Palm

對不起我的壞。。我正在使用v1.5 – Palm

CSS屬性過渡和動畫讓你挑寬鬆功能。不幸的是，它們不支持所有緩動，您必須自己指定所需的緩動功能（作爲貝塞爾曲線）。

Easings.net

這似乎有4種默認類型寬鬆，應該工作的。

線性
便於
易於在
易於出
易於進出

這些工作直接，但是差異是微妙

對於更有效的緩解類型，您必須使用允許您的貝塞爾曲線創建您自己的緩動。例如下面的是「easeInOutBack」

cubic-bezier(0.680, -0.550, 0.265, 1.550)

當角動畫功能

animate("1500ms 2000ms cubic-bezier(0.680, -0.550, 0.265, 1.550)", style({transform: "translateX(-100%)"}))

使用可以導航到該bezier curver generator應該爲你提供創建自己的漸變效果的能力。

來源

2016-07-19 15:27:04

Angular2動畫:: Easings無法按預期方式工作

回答

相關問題