Angular2动画:：地役权不像预期的那样工作
Angular2动画:：地役权不像预期的那样工作
提问于 2016-07-08 09:24:08
我正在开发一个可折叠组件，您可以单击这个组件来滚动/向下显示/隐藏详细信息。构成部分如下：
// 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。任何帮助都会很感激的。
回答 2
Stack Overflow用户
发布于 2016-07-19 15:27:04
CSS属性转换和动画允许您选择放松功能。不幸的是，它们并不支持所有的附加条件，您必须自己指定所需的放松函数(作为Bezier曲线)。
似乎有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曲线发生器，它应该为您提供创建自己的地役权的能力。
Stack Overflow用户
发布于 2016-07-08 09:28:50
动画不再是角质/核心的一部分。所以你必须导入它，它是模块ngAnimate的一部分。因此，要使用$animate服务，您需要导入js/lib/ange-activate.js库。
bower install --save angular-animate页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38263178
复制相关文章
相似问题
腾讯云开发者
