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

发布时间：2020-12-17 17:04:36 所属栏目：安全来源：网络整理

导读：我正在开发一个可折叠的组件,您可以单击该组件来向上/向下滚动以显示/隐藏详细信息.该组件如下： // component.tsimport {Component,Directive,Input} from '@angular/core';import {trigger,state,style,transition,animate} from '@angular/core'@Componen

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

// 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 }

}

该组件部分工作正常.然而,动画并不完美.我已经将组件配置为使用缓出动画,但实际上,组件是线性动画的.

我尝试过使用缓出,eaSEOut,缓出立方,eaSEOutCubic,easy-in-out,easeInOut,bounce和许多其他排列,但该组件仍然是线性动画.我真的需要为我的组件使用缓出.任何帮助将非常感激.

解决方法

CSS properties transition and animation allow you to pick the easing
function. Unfortunately,they don’t support all easings and you must
specify the desired easing function yourself (as a Bezier curve).

Easings.net

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

>线性
>轻松
>安慰
>缓解
>轻松进出

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

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

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

使用Angular动画功能时

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

您可以导航到这个bezier curver generator,它可以让您创建自己的缓动.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!