1.先做一个简单的例子

 => 

  定义一个div 从open渐变成closed

  ts:定义一个触发器 openClose,有两个状态 open 和 closed,均有对应的样式,再定义装换函数 transition

import { Component, OnInit} from '@angular/core';
// 动画函数
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-study',
templateUrl: './study.component.html',
styleUrls: ['./study.component.scss'],
animations: [
trigger('openClose', [
state('open', style({
height: '200px',
opacity: ,
backgroundColor: 'yellow'
})),
state('closed', style({
height: '100px',
opacity: 0.5,
backgroundColor: 'green'
})),
transition('open => closed', [animate('1s')]),
transition('closed => open', [animate('0.5s')]),
]),
],
})
export class StudyComponent implements OnInit {
isOpen = true;
constructor() {
} ngOnInit() {
} toggle() {
this.isOpen = !this.isOpen;
}
}

  html:@后面指定触发器 并赋值状态

<div [@openClose]="isOpen? 'open':'closed'" (click)="toggle()">
<p>The box is now {{isOpen?'Open':'Closed'}}!</p>
</div>

Angular 动画的更多相关文章

  1. Angular动画

    Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是 ...

  2. angular动画知识点以及代码样例

    原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...

  3. Angular动画(ng-repeat)

    ng-repeat 动画 根据列表元素的插入与移除,触发相应的代码添加动画 <!doctype html> <html lang="en" ng-app=&quo ...

  4. Angular动画——路由动画及高阶动画函数

    一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...

  5. Angular动画(ng-class)

    ng-class 同 触发的是 addClass//当给元素添加一个class时触发, removeClass //把元素的class移除时触发 <ul ng-style="ulWid ...

  6. Angular 小试牛刀[1]:Getting Started

    首先,Angular2 与 Angular1.x 版本没有多大关系,甚至可以说是两个完全不一样的框架,故 Angular 指的是 Angular2 及以上的版本.而 Angular 与 TypeScr ...

  7. 动态创建angular组件实现popup弹窗

    承接上文,本文将从一个基本的angular启动项目开始搭建一个具有基本功能.较通用.低耦合.可扩展的popup弹窗(脸红),主要分为以下几步: 基本项目结构搭建 弹窗服务 弹窗的引用对象 准备作为模板 ...

  8. 从源码看 angular/material2 中 dialog模块 的实现

    本文将探讨material2中popup弹窗即其Dialog模块的实现. 使用方法 引入弹窗模块 自己准备作为模板的弹窗内容组件 在需要使用的组件内注入 MatDialog 服务 调用 open 方法 ...

  9. angular学习第1步

    #### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...

随机推荐

  1. 导出zabbix监控数据

    linux memory: mysql -u zabbix -p -h 127.0.0.1 zabbix -e "select h.name, 100-AVG(hi.value_avg) f ...

  2. 随心测试_软测基础_006<测试人职业发展>

    接上篇:熟悉了_测试人员的工作职责范围与具体的工作内容 ,如何规划:测试人员的职业路线呢? 贴心小提示:以下内容,仅供参考,不挖坑 Q1:如何规划测试工程师的职业发展路线? A1:SX的观点:预定目标 ...

  3. Charles抓包工具使用

    Charles抓包工具使用和进行接口数据模拟 打开软件,选择Tools  >>  Map Local  >>  勾选enable  >>  add  >> ...

  4. Docker 概览

    什么是Docker Docker是开发,运行和部署应用程序的开放管理平台. 开发人员能利用docker 开发和运行应用程序 运维人员能利用docker 部署和管理应用程序 Docker 平台介绍 Do ...

  5. [转帖]Oracle 补丁体系(PSR/PSU/CPU) 及 opatch 工具 介绍

    Oracle 补丁体系(PSR/PSU/CPU) 及 opatch 工具 介绍 原文:http://blog.csdn.net/tianlesoftware/article/details/58095 ...

  6. jQuery的deferred对象实战应用(附:Exchar动态多条数据展示并在topic展示详细数据)

    解决三个后台请求都成功后先比较数据再处理数据的需求 今天碰到了一个问题,我需要创建一个图表,但是需要请求三个接口才能比较出指标数据,于是就看到了deferred对象 理论的补充在这里:http://w ...

  7. 【调试工具】tcpdump

    [tcpdump]https://linux.cn/article-10191-1.html

  8. jsp学习(2)jsp标签

    1.脚本程序 脚本程序可以包含任意量的Java语句.变量.方法或表达式,只要它们在脚本语言中是有效的. 脚本程序的语法格式:<%代码片段%>您也可以编写与其等价的XML语句,就像下面这样: ...

  9. IOS 选择会员资格

    选择会员资格 针对所有 Apple 平台进行开发从未如此简单.要开始为 macOS.iOS.tvOS 和 watchOS 开发 app,请从 Mac App Store 下载 Xcode.如果您已准备 ...

  10. android 调用 screenrecord 实现录屏

    首先要说明的是并未实现,本文讲一下自己的思路. adb 使用shell 命令 screenrecord 可录屏. 自己写了个app,通过Process p = Runtime.getRuntime() ...