avatar

each article in page.posts.data
Angular动画

原生实现

如果不使用框架的话我们在浏览器中使用动画无非2种

  • css实现
  • js实现

css实现

我们可以使用基于css3的一个动画库,Animate.css
这样可以实现动画,但是不太好控制它的行为

javascript实现

如果为了实现更复杂的动画,更好的控制,我们可以使用js来实现动画
比如使用

Angular中使用

官方文档

典型的动画会涉及多种随时间变化的转换。HTML 元素可以移动、变换颜色、增加或缩小、隐藏或从页面中滑出。 这些变化可以同时发生或顺序发生。你可以控制每次转换的持续时间。

Angular 的动画系统是基于 CSS 功能构建的,这意味着你可以 “动” 浏览器认为可动的任何属性。包括位置、大小、变形、颜色、边框等。W3C 在它的 CSS Transitions 页中维护了一个可动属性的列表。

angular动画大体分为四部分

  • trigger()
  • transition()
  • state()
  • animate()

trigger

创建一个有名字的动画触发器,包含一个 state() 和 transition() 的列表,当此触发器的绑定表达式发生变化时,它们就会重新求值。

state

在附加到元素的触发器上,声明一个动画状态。
默认状态为void,简称无状态

transition

声明一个转场动画,以便在满足给定条件时运行一系列动画步骤。该条件是一个逻辑型表达式或一个函数, 该函数比较以前和现在的动画状态,如果应该开始转场则返回 true。 当满足所定义的转场动画的状态标准时,就会开始执行相关的动画。

animate

定义一个动画步骤,它把一些样式信息和时序信息组合在一起。

示例demo
app.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@Component({
selector: 'app-app',
animations: [
trigger('openClose', [
// ...
state('open', style({
height: '200px',
opacity: 1,
backgroundColor: 'yellow'
})),
state('closed', style({
height: '100px',
opacity: 0.5,
backgroundColor: 'green'
})),
transition('open => closed', [
animate('1s')
]),
transition('closed => open', [
animate('0.5s')
]),
]),
],
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class OpenCloseComponent {
isOpen = true;

toggle() {
this.isOpen = !this.isOpen;
}

}

app.component.html

1
2
3
<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
<p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

app.component.css

1
2
3
4
5
6
7
8
9
10
11
12
:host {
display: block;
}

.open-close-container {
border: 1px solid #dddddd;
margin-top: 1em;
padding: 20px 20px 0px 20px;
color: #000000;
font-weight: bold;
font-size: 20px;
}
文章作者: 王志超
文章链接: http://wangzc.wang/2020/01/16/angularAnimation/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 王志超的博客
打赏
  • 支付寶
    支付寶
  • 微信
    微信

评论