博客
关于我
Angular开发(二十五)-angular自带动画效果
阅读量:123 次
发布时间:2019-02-26

本文共 862 字,大约阅读时间需要 2 分钟。

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页面中使用动画

三、操作动画

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

四、

转载地址:http://svvf.baihongyu.com/

你可能感兴趣的文章
mysql文本函数和数字函数
查看>>
Mysql新建用户和数据库并授权
查看>>
mysql日志
查看>>
mysql日志 事务问题_mysql因为事务日志问题无法启动
查看>>
mysql日志文件
查看>>
mysql日志管理学习笔记
查看>>
mysql日志问题定位实用命令
查看>>
MySQL日期时间函数大全
查看>>
mysql时间相减的问题
查看>>
mysql时间表示和计算
查看>>
MySQL是如何做容器测试的?
查看>>
mysql更改数据库表utf-8_修改mysql数据库为 utf-8
查看>>
mysql更改表引擎INNODB为MyISAM的方法总结
查看>>
mysql更新一个表里的字段等于另一个表某字段的值
查看>>
Mysql更新时间列只改日期为指定日期不更改时间
查看>>
MySQL更新锁(for update)摘要
查看>>
mysql更新频率_MySQL优化之如何了解SQL的执行频率
查看>>
mysql替换表的字段里面内容
查看>>
MySQL最多能有多少连接
查看>>
MySQL最大建议行数 2000w,靠谱吗?
查看>>