Angular开发(二十五)-angular自带动画效果

angular2中使用自带的动画

一、在组件中创建一个动画

import {Component,OnInit,style,trigger,state,transition,animate,keyframes} from '@angular/core'; @Component({ selector: 'app-page1', templateUrl: './page1.component.html', styleUrls: ['./page1.component.css'], animations:[ //可以设置多个动画 trigger("动画名称",[ state("状态名称",style({ transform:"scale(1)" //设置样式 })), state("active",style({ transform:"scale(1.5)" //设置样式 })), //设置从一个状态到另外一个状态的运动效果，非必填字段 transition("inactive=>active",animate("100ms ease-in")), transition("active=>inactive",animate("100ms ease-out")), ]) ] })

二、在html页面中使用动画

<!--可以加上事件修改动画的状态，下面就加了一个鼠标移入与移出的事件--> <div class="box" [@动画名称]="动画句柄名称" (mouseenter)="toggleLoginState(true)" (mouseleave)="toggleLoginState(false)"></div>

三、操作动画

export class Page1Component implements OnInit { private loginBtnState:string = "inactive"; constructor() { } ngOnInit() { } //绑定事件 toggleLoginState(state:boolean){ this.loginBtnState = state ? "active":"inactive"; } }

四、demo下载地址