angular动画基本动画封装库
angular动画很强大,但在组件中写一大堆比较碍眼,本例对常用的动画效果进行独立封装,方便调用,保持基本动画效果的一致性.减少写动画代码的痛苦.
本例定义了淡入/淡出/展开/收缩/飞入/飞出/放大/缩小效果,保存为独立ts文件导入组件即可使用.
使用方法
组件中
import { fadeIn,fadeOut,stretch,shrink,flyIn,flyOut,zoomIn,zoomOut } from './sim-anim.ts'; @Component({ // ... animations: [fadeIn,zoomOut] })
模板中
<div @flyIn @flyOut>...</div>
或
import { simAnim } from './sim-anim.ts'; @Component({ // ... animations: [simAnim] })
模板中
<div [@]simAnim="'flyIn'">...</div>
源
//sim-anim.ts import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { trigger,state,style,transition,animate,keyframes } from '@angular/animations'; // 动画时间线 var time = '300ms' var styles = { ease: time + ' ease ',linear: time + ' linear ',easeIn: time + ' ease-in',eaSEOut: time + ' ease-out',stepStart: time + ' step-start',stepEnd: time + ' step-end',easeInOut: time + ' ease-in-out',faSEOutSlowIn: time + ' cubic-bezier(0.4,0.2,1)',inOutBack: time + ' cubic-bezier(0.68,-0.55,0.27,1.55)',inOutCubic: time + ' cubic-bezier(0.65,0.05,0.36,inOutQuadratic: time + ' cubic-bezier(0.46,0.03,0.52,0.96)',inOutSine: time + ' cubic-bezier(0.45,0.55,0.95)' } // 动画配置 var opts = { fadeIn: [ style({ opacity: 0 }),animate(styles.inOutBack,style({ opacity: 1 })),],fadeOut: [ style({ opacity: 1 }),style({ opacity: 0 })) ],shrink: [ style({ height: '*' }),style({ height: 0 })) ],stretch: [ style({ height: '0' }),style({ height: '*' })) ],flyIn: [ style({ transform: 'translateX(-100%)' }),style({ transform: '*' })) ],flyOut: [ style({ transform: '*' }),style({ transform: 'translateX(-100%)' })) ],zoomIn: [ style({ transform: 'scale(.5)' }),zoomOut: [ style({ transform: '*' }),style({ transform: 'scale(.5)' })) ] } // 导出动画时间线定义,供自定义动画的时候使用 export const animStyle = styles // 导出动画 export const fadeIn = [trigger('fadeIn',[transition('void => *',opts.fadeIn)])] export const fadeOut = [trigger('fadeOut',[transition('* => void',opts.fadeOut)])] export const stretch = [trigger('stretch',opts.stretch)])] export const shrink = [trigger('shrink',opts.shrink)])] export const flyIn = [trigger('flyIn',opts.flyIn)])] export const flyOut = [trigger('flyOut',opts.flyOut)])] export const zoomIn = [trigger('zoomIn',opts.zoomIn)])] export const zoomOut = [trigger('zoomOut',opts.zoomOut)])] export const simAnim = [ trigger('simAnim',[ transition('* => fadeIn',opts.fadeIn),transition('* => fadeIn',opts.fadeOut),transition('* => shrink',opts.shrink),transition('* => stretch',opts.stretch),transition('* => flyIn',opts.flyIn),transition('* => flyOut',opts.flyOut),transition('* => zoomIn',opts.zoomIn),transition('* => zoomOut',opts.zoomOut) ]) ]