Angular animations动画练习

Angular2的动画系统赋予了制作各种动画效果的能力，致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。 animations元数据属性在定义@Component装饰。就像template元数据属性！这样就可以让动画逻辑与其应用代码紧紧集成在一起，这让动画可以更容易的出发与控制

回调函数

回调用法也是很简单，如下：

  

  


  Callback(f:boolean){
    if(f){
      console.log("动画开始");
    }else {
      console.log("动画结束");
    }
  }

query

用法和css选择器大致相同,通过query便可以实现不同元素实现不同的动画效果。

/*
query选择器演示
用法和css选择器大致相同
 */
export const QueryAnimate = trigger('QueryAnimate',[
    transition('off=>on', [
      // 先全部隐藏
      query('p', style({ opacity: 0 })),
      // 再执行动画
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateX(-400%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 0, transform: 'translateY(400%)', offset: 0}),
        style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(0.5)'}),
        style({transform: 'scale(1)'})
      ]) )),
    ]),
    transition('on=>off', [
      query('.box-top', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(-400%)'})
      ]) )),
      query('.box-center', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateX(0)'}),
        style({opacity: 0, transform: 'translateX(-400%)'})
      ]) )),
      query('.box-foot', animate('500ms',keyframes([
        style({opacity: 1, transform: 'translateY(0)'}),
        style({opacity: 0, transform: 'translateY(400%)'})
      ]) )),
      query('h2', animate('500ms',keyframes([
        style({transform:'scale(1)'}),
        style({transform: 'scale(0.5)'})
      ]) )),
    ])
  ]);

相关推荐;

CSS3中transform、transition和animationsan三种属性的区别实例详解

抽象极简中国风海报矢量背景

抽象极简中国风海报矢量背景适用于邀请函海报（清明节相关的活动邀请函、海报和宣传材料）、文化活动宣传（中国文化节、书画展览、诗词朗诵会等文化活动的宣传海报、邀请函或节目单）、教育材料（中国文化、历史、艺术或文学的教育书籍、教材或练习册中）、品牌形象设计（为茶馆、书店、艺术品店等具有中国传统文化特色的品牌设计标志、名片、信纸等品牌形象元素）等相关设计的AI格式素材。

下载

css的animation动画的使用教程

animation实现让云朵飘的动画实例