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

本文共 732 字,大约阅读时间需要 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('loginAnimation', [state('normal', style({transform: 'scale(1)'})),state('active', style({transform: 'scale(1.5)'})),transition('normal => active', animate('100ms ease-in')),transition('active => normal', animate('100ms ease-out'))])]})export class Page1Component implements OnInit {private loginBtnState: string = 'inactive';

constructor() {}ngOnInit() {}toggleLoginState(state: boolean) {  this.loginBtnState = state ? 'active' : 'inactive';}

}

???HTML???????

??????

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

你可能感兴趣的文章
postgresql Streaming Replication监控与注意事项
查看>>
postgresql 不需要付费_使用数据传输在PostgreSQL执行 外部连接运算符
查看>>
postgresql 主从配置_生产环境postgresql主从环境配置
查看>>
postgresql 函数&存储过程 ; 递归查询
查看>>
PostgreSQL 分组聚合查询中 filter 子句替换 case when
查看>>
PostgreSQL 同步流复制锁瓶颈分析
查看>>
PostgreSQL 备份与还原命令 pg_dump
查看>>
Postgresql 外部表插件postgres_fdw的安装和使用
查看>>
PostgreSQL 如何从崩溃状态恢复(上)
查看>>
PostgreSQL 存储过程基本语法
查看>>
PostgreSQL 实现批量更新、删除、插入
查看>>
PostgreSQL 导入 .gz 备份文件
查看>>
PostgreSQL 批量插入&更新数据时报错(ERROR: ON CONFLICT DO UPDATE command cannot affect row a second time)
查看>>
PostgreSQL 新增数据返回自增ID
查看>>
postgresql 更新多列数据
查看>>
PostgreSQL 服务启动后停止
查看>>
PostgreSQL 辟谣存在任意代码执行漏洞:消息不实
查看>>
PostgreSQL+PostGIS实现两坐标点之间最短路径查询算法函数(地图工具篇.12)
查看>>
Qt开发——简易调色板QPalette
查看>>
PostgreSQL-解决连接时遇到的乱码问题
查看>>