大佬教程收集整理的这篇文章主要介绍了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 } }
该组件部分工作正常.然而,动画并不完美.我已经将组件配置为使用缓出动画,但实际上,组件是线性动画的.
我尝试过使用缓出,eaSEOut,缓出立方,eaSEOutCubic,easy-in-out,easeInOut,bounce和许多其他排列,但该组件仍然是线性动画.我真的需要为我的组件使用缓出.任何帮助将非常感激.
以上是大佬教程为你收集整理的Angular2动画:: Easings无法按预期工作全部内容,希望文章能够帮你解决Angular2动画:: Easings无法按预期工作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。