博客
关于我
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五补充部分:SQL逻辑查询语句执行顺序
查看>>
mysql交互式连接&非交互式连接
查看>>
MySQL什么情况下会导致索引失效
查看>>
Mysql什么时候建索引
查看>>
MySql从入门到精通
查看>>
MYSQL从入门到精通(一)
查看>>
MYSQL从入门到精通(二)
查看>>
mysql以下日期函数正确的_mysql 日期函数
查看>>
mysql以服务方式运行
查看>>
mysql优化--索引原理
查看>>
MySQL优化之BTree索引使用规则
查看>>
MySQL优化之推荐使用规范
查看>>
Webpack Critical CSS 提取与内联教程
查看>>
mysql优化概述(范式.索引.定位慢查询)
查看>>
MySQL优化的一些需要注意的地方
查看>>
mysql优化相关
查看>>
MySql优化系列-优化版造数据(存储过程+函数+修改存储引擎)-2
查看>>