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