• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 属性样式动画
2
3
4
5在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。
6
7
8```
9<!-- xxx.hml -->
10<div class="container">
11  <div class="fade">
12    <text>fading away</text>
13  </div>
14  <div class="bigger">
15    <text>getting bigger</text>
16  </div>
17</div>
18```
19
20
21```
22/* xxx.css */
23.container {
24  background-color:#F1F3F5;
25  display: flex;
26  justify-content: center;
27  align-items: center;
28  flex-direction: column;
29}
30.fade{
31  width: 30%;
32  height: 200px;
33  left: 35%;
34  top: 25%;
35  position: absolute;
36  animation: 2s change infinite friction;
37}
38.bigger{
39  width: 20%;
40  height: 100px;
41  background-color: blue;
42  animation: 2s change1 infinite linear-out-slow-in;
43}
44text{
45  width: 100%;
46  height: 100%;
47  text-align: center;
48  color: white;
49  font-size: 35px;
50  animation: 2s change2 infinite linear-out-slow-in;
51}
52/* 颜色变化 */
53@keyframes change{
54  from {
55    background-color: #f76160;
56    opacity: 1;
57  }
58  to {
59    background-color: #09ba07;
60    opacity: 0;
61  }
62}
63/* 父组件大小变化 */
64@keyframes change1{
65  0% {
66    width: 20%;
67    height: 100px;
68  }
69  100% {
70    width: 80%;
71    height: 200px;
72  }
73}
74/* 子组件文字缩放 */
75@keyframes change2{
76  0%{
77   transform: scale(0);
78  }
79  100% {
80    transform: scale(1.5);
81  }
82}
83```
84
85
86![zh-cn_image_0000001217168141](figures/zh-cn_image_0000001217168141.gif)
87
88
89> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
90> - animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。
91>
92> - 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。
93