import {
Component, Input, OnInit
} from '@angular/core';
import {
trigger, state, style, animate, transition, group, sequence, keyframes, useAnimation, stagger, animateChild, query, animation
} from '@angular/animations'; var fadeAnimation = animation([
style({ opacity: '{{ start }}' }),
animate('{{ time }}', style({ opacity: '{{ end }}' }))
], { params: { time: '1000ms', start: 0, end: 1 } }); @Component({
selector: 'app-animate',
templateUrl: './animate.component.html',
styleUrls: ['./animate.component.css'],
animations: [
trigger('state', [
state('pointA', style({
left: '0%'
})),
transition('pointA => pointB', [
style({
border: "3px solid #000"
}),
animate(1000, style({
left: "100%"
})),
group([
//basic animation
]),
sequence([
//basic animation
]),
query(":leave", [
//basic animation
]),
query(":leave", stagger(1000, [
//basic animation
])),
useAnimation(fadeAnimation, {
params: {
time: '2s',
start: 1,
end: 0
}
})
])
])
]
})
export class AnimateComponent implements OnInit {
state = 'pointA';
constructor() { }
ngOnInit() {
}
}

  

源码链接:https://github.com/angular/angular/blob/master/packages/animations/src/animation_metadata.ts

在开始前,我们先不管如何写动画,先看trigger是什么,所有的trigger都可以直接绑定element

<div [@state]="state1" ></div>

像这样,只要state1 有改变,trigger都会触发。
在trigger世界里,是能控制state 和 transition。

state是转场的“场”

state("void", style({ height: 0 })) //void是保留字,是没有东西
state("*", style({ height: 0 })) //*是保留字,是default
state("closed", style({ height: 0 }))
state("open, visible", style({ height: "*" }))

    

transition是转场,state去到下一个state

transition("on => off", animate(500)),
transition("on <=> off", animate(500)),
transition("on => off, off => void", animate(500)),
transition("void => *", animate(500)),
transition("* => *", animate("1s 0s")),
transition((fromState, toState) => {
return fromState == "off" && toState == "on";
}, animate("1s 0s"))
transition(":enter", animate(500)),
transition(":leave", animate(500)),

  

当了解state 和 transition 后,我们需要了解基础动画 style 和 animate

style 使用方式和css一样,这里就不多说

animate 使用方式就很多 (可以控制过渡时长,延迟,和过渡动作,结束动画)

animate(500, style(...))
animate("1s", style(...))
animate("100ms 0.5s", style(...))
animate("5s ease", style(...))
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))
animate(500, style({ background: "red" }))
animate(500, keyframes([
style({ background: "blue" })),
style({ background: "red" }))
])

animate 对象里可以有style 和 keyframe,懂css的都明白。

动画基础讲述的是style 和 animate, 高级动画是group, sequence, query,stagger。所有的高级都基于动画基础的组装。

group是把多个基础给包在一起,同时触发

group([
animate("1s", { background: "black" }))
animate("2s", { color: "white" }))
])

  

sequence就相对的,是一个一个触发。(默认功能)

 sequence([
style({ opacity: 0 })),
animate("1s", { opacity: 1 }))
])

如果你不要特地包一个sequence,你可以直接写基础动画,效果是一样的

query是可以寻找指定的子层进行动画,寻找的方式有

 query('div', [
animate(...),
animate(...)
], { limit: 1 }) query('.some-element-that-may-not-be-there', [
animate(...),
animate(...)
], { optional: true }) query(':self, .record:enter, .record:leave, @subTrigger', [...]) - Querying for newly inserted/removed elements using `query(":enter")`/`query(":leave")`
- Querying all currently animating elements using `query(":animating")`
- Querying elements that contain an animation trigger using `query("@triggerName")`
- Querying all elements that contain an animation triggers using `query("@*")`
- Including the current element into the animation sequence using `query(":self")`

limit 是声明限制element的数量, optional 是如果query可能没有找到,就得声明

:enter / :leave 等等都是特别的表达寻找式,这里不多说

stagger 是间隔,通常用在ngFor,场景是当你需要删除多个元素时,你需要每一个元素都是间隔离开,而不是同时离开

query(':leave', [
stagger(100, [
animate('0.5s', style({ opacity: 0 }))
])
]),
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('0.5s', style({ opacity: 1 }))
])
])

调用query才能使用stagger,因为query才可以选着多个元素

animateChild() 这里有bug,在不调用这功能时,子层的trigger是不会触发的,但是目前就是会触发……

query('@childAnimation',
animateChild()
))
query('@childAnimation', stagger(100, [
animateChild()
]))

  

UseAnimate是一个调用方法,也是复用的部分

 var fadeAnimation = animation([
style({ opacity: '{{ start }}' }),
animate('{{ time }}',
style({ opacity: '{{ end }}'))
], { params: { time: '1000ms', start: 0, end: 1 }}); useAnimation(fadeAnimation, {
params: {
time: '2s',
start: 1,
end: 0
}
})

  

最后就是所有的基础动画都是可以组装的,即使我没有给出所有的例子。在组装一定是在array里 [],只要是逻辑就能装的,transition的例子就是这样。

angular 2 animation 结构笔记 version 4.2.2的更多相关文章

  1. [转]Angular项目目录结构详解

    本文转自:https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873 版权声明:本文为博主原创文章,转载请注明地址.如果文中有什么纰漏 ...

  2. Angular 学习笔记 (version 6 小笔记)

    1. lazyload 的 path 变成相对路径了, 不过如果你用 ng update 的话, 依然可以不需要修改, cli config 好像能调支持绝对路径的写法. const routes: ...

  3. Angular项目目录结构

    前言:不支持MakeDown的博客园调格式的话,真的写到快o(╥﹏╥)o了,所以老夫还是转战到CSDN吧,这边就不更新啦啦啦~ CSDN地址:https://blog.csdn.net/Night20 ...

  4. 3.2 配置构建Angular应用——简单的笔记存储应用

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  5. CSS3 Animation学习笔记

    Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支 ...

  6. Angular Universal(统一平台)笔记

    angular官网高级文档AngularUniversal部分的翻译总结,这东西在angular4开始正式被官方支持了,目前其实支持的服务器端还没有很多,但好歹包括了node和DotNetCore,算 ...

  7. Angular的项目结构

    前面我们已经在我们想要的位置顺利的创建了Angular项目,现在我们就来看一下项目的结构吧. 下面使我们项目的整体结构,包括node的模板.src资源文件以及配置文件等. 下面是根目录文件夹内的文件用 ...

  8. angular $q的学习笔记转帖

    http://blog.segmentfault.com/bornkiller/1190000000402555 angular $q的一个不错的学习笔记

  9. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

随机推荐

  1. U盘出现很多.exe的文件处理方案

    1.原来优盘显示隐藏系统文件后,会有MyDocument文件夹和MyDocument.exe文件两个. 2.在MyDocument文件夹下新建文件夹名为“安全区”的空文件夹. 3.在U盘的根目录下新建 ...

  2. docker+elasticsearch的安装

    查询镜像 [root@ elasticsearch]# docker search elasticsearch INDEX NAME DESCRIPTION STARS OFFICIAL AUTOMA ...

  3. python基础(11)-常用模块

    re(正则)模块 常用方法 findall() 以列表返回所有满足条件的结果 import re print(re.findall('\d','a1b2c2abc123'))#['1', '2', ' ...

  4. 【LeetCode每天一题】Maximum Subarray(最大子数组)

    Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...

  5. 深入理解Java虚拟机6-chap8-9-斗者3星

    一.虚拟机字节码执行引擎 1.虚拟机执行引擎由自己实现,所以可以自行制定指令集与执行引擎的体系结构,并且可以执行那些不被硬件直接支持的指令集格式. 2.执行引擎 编译执行:通过JIT编译器产生本地代码 ...

  6. 四、latex字体字号设置

    latex的思想是格式与内容的分离,所以不建议在文中使用大量命令,而是定义一个新的命令

  7. Maven 编译跳过检查

    Maven 编译跳过检查 使用maven打包的时候指令:clean package, 但过程可会有提示检测错误,如果想跳过检查,需加上:-Dmaven.test.skip=true 完整指令: cle ...

  8. CentOS 7 nginx+tomcat9 session处理方案之session保持

    Session保持(会话保持)是我们见到最多的名词之一,通过会话保持,负载均衡进行请求分发的时候保证每个客户端固定的访问到后端的同一台应用服务器.会话保持方案在所有的负载均衡都有对应的实现.而且这是在 ...

  9. List查询重复值的个数,并根据重复的数目从多到少排列

    package ttt; import java.nio.MappedByteBuffer; import java.util.ArrayList; import java.util.Collecti ...

  10. Linux安装 centos 7 最小化 安装

    我用的是vmware 15 ,我将用图片的形式带领大家安装,没有说到的地方为默认选项    最好把文件放到一个单独的文件夹中    简单密码点击两次DONE 即可,虚拟机密码不必那么复杂,工作环境请设 ...