Angular2动画:: Easings无法按预期工作

Question

我正在开发一个可折叠组件,您可以单击该组件来向上/向下滚动以显示/隐藏详细信息.该组件如下:

// 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用于我的组件.任何帮助将非常感激.

Answer 1

CSS属性转换和动画允许您选择缓动功能.不幸的是,它们不支持所有缓和,您必须自己指定所需的缓动函数(作为Bezier曲线).

Easings.net

似乎有4种默认类型的缓动应该有效.

• 线性
• 缓解
• 易用性在
• 渐出
• 易于进出

这些工作直接,但差异是微妙的

对于更有效的缓动类型,您必须使用贝塞尔曲线,它允许您创建自己的缓动.例如,下面是"easeInOutBack"

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

使用Angular动画功能时

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

您可以导航到这个贝塞尔曲线生成器,它可以为您提供创建自己的缓动的能力.