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，{{1}和许多其他排列，但该组件仍然线性动画。我真的需要使用bounce作为我的组件。任何帮助都会非常感激。

Answer 1

CSS属性转换和动画允许您选择缓动功能。不幸的是，他们不支持所有的宽松政策，你必须这样做自己指定所需的缓动函数（作为贝塞尔曲线）。

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%)"}))

你可以导航到这个bezier curver generator，它可以为你提供创建自己的缓和的能力。

Answer 2

Animate不再是angular / core的一部分..所以你必须导入它，它是模块ngAnimate的一部分..所以要使用$ animate服务你需要导入js / lib / angular-animate.js库。

bower install --save angular-animate

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

2 个答案: