Skip to content

Commit d12b237

Browse files
AlexisCharpAlexisCharp
authored
feat(fall-in-animation): fall-in animation proposal (#5)
1 parent 61edd08 commit d12b237

File tree

4 files changed

+104
-16
lines changed

4 files changed

+104
-16
lines changed

‎exercise/09-ui/app/components/PizzaPreview/PizzaPreview.css

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
position: absolute;
5252
background-repeat: no-repeat;
5353
background-size: contain;
54+
animation: fallIn 0.4s ease-in;
5455
}
5556

5657
.pizza__topping--anchovy {
@@ -70,7 +71,8 @@
7071
left: 263px;
7172
top: 95px;
7273
}
73-
.pizza__topping--anchovy:nth-child(4), .pizza__topping--anchovy:nth-child(5) {
74+
.pizza__topping--anchovy:nth-child(4),
75+
.pizza__topping--anchovy:nth-child(5) {
7476
display: none;
7577
}
7678

@@ -119,7 +121,8 @@
119121
left: 222px;
120122
top: 98px;
121123
}
122-
.pizza__topping--basil:nth-child(4), .pizza__topping--basil:nth-child(5) {
124+
.pizza__topping--basil:nth-child(4),
125+
.pizza__topping--basil:nth-child(5) {
123126
display: none;
124127
}
125128

@@ -167,7 +170,8 @@
167170
left: 162px;
168171
top: 8px;
169172
}
170-
.pizza__topping--mozzarella:nth-child(4), .pizza__topping--mozzarella:nth-child(5) {
173+
.pizza__topping--mozzarella:nth-child(4),
174+
.pizza__topping--mozzarella:nth-child(5) {
171175
display: none;
172176
}
173177
.pizza__topping--mushroom {
@@ -314,7 +318,8 @@
314318
left: 212px;
315319
top: 146px;
316320
}
317-
.pizza__topping--sweetcorn:nth-child(4), .pizza__topping--sweetcorn:nth-child(5) {
321+
.pizza__topping--sweetcorn:nth-child(4),
322+
.pizza__topping--sweetcorn:nth-child(5) {
318323
display: none;
319324
}
320325

@@ -342,3 +347,20 @@
342347
.pizza__topping--tomato:nth-child(5) {
343348
display: none;
344349
}
350+
351+
@keyframes fallIn {
352+
0% {
353+
transform: translateY(-100px);
354+
opacity: 0;
355+
}
356+
70% {
357+
transform: translateY(0);
358+
opacity: 1;
359+
}
360+
90% {
361+
transform: translateY(-10px);
362+
}
363+
100% {
364+
transform: translateY(0);
365+
}
366+
}

‎final/09-ui/progressive-pizza/app/components/PizzaPreview/PizzaPreview.css

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
position: absolute;
5252
background-repeat: no-repeat;
5353
background-size: contain;
54+
animation: fallIn 0.4s ease-in;
5455
}
5556

5657
.pizza__topping--anchovy {
@@ -70,7 +71,8 @@
7071
left: 263px;
7172
top: 95px;
7273
}
73-
.pizza__topping--anchovy:nth-child(4), .pizza__topping--anchovy:nth-child(5) {
74+
.pizza__topping--anchovy:nth-child(4),
75+
.pizza__topping--anchovy:nth-child(5) {
7476
display: none;
7577
}
7678

@@ -119,7 +121,8 @@
119121
left: 222px;
120122
top: 98px;
121123
}
122-
.pizza__topping--basil:nth-child(4), .pizza__topping--basil:nth-child(5) {
124+
.pizza__topping--basil:nth-child(4),
125+
.pizza__topping--basil:nth-child(5) {
123126
display: none;
124127
}
125128

@@ -167,7 +170,8 @@
167170
left: 162px;
168171
top: 8px;
169172
}
170-
.pizza__topping--mozzarella:nth-child(4), .pizza__topping--mozzarella:nth-child(5) {
173+
.pizza__topping--mozzarella:nth-child(4),
174+
.pizza__topping--mozzarella:nth-child(5) {
171175
display: none;
172176
}
173177
.pizza__topping--mushroom {
@@ -314,7 +318,8 @@
314318
left: 212px;
315319
top: 146px;
316320
}
317-
.pizza__topping--sweetcorn:nth-child(4), .pizza__topping--sweetcorn:nth-child(5) {
321+
.pizza__topping--sweetcorn:nth-child(4),
322+
.pizza__topping--sweetcorn:nth-child(5) {
318323
display: none;
319324
}
320325

@@ -342,3 +347,20 @@
342347
.pizza__topping--tomato:nth-child(5) {
343348
display: none;
344349
}
350+
351+
@keyframes fallIn {
352+
0% {
353+
transform: translateY(-100px);
354+
opacity: 0;
355+
}
356+
70% {
357+
transform: translateY(0);
358+
opacity: 1;
359+
}
360+
90% {
361+
transform: translateY(-10px);
362+
}
363+
100% {
364+
transform: translateY(0);
365+
}
366+
}

‎final/10-error-boundary/progressive-pizza/app/components/PizzaPreview/PizzaPreview.css

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
position: absolute;
5252
background-repeat: no-repeat;
5353
background-size: contain;
54+
animation: fallIn 0.4s ease-in;
5455
}
5556

5657
.pizza__topping--anchovy {
@@ -70,7 +71,8 @@
7071
left: 263px;
7172
top: 95px;
7273
}
73-
.pizza__topping--anchovy:nth-child(4), .pizza__topping--anchovy:nth-child(5) {
74+
.pizza__topping--anchovy:nth-child(4),
75+
.pizza__topping--anchovy:nth-child(5) {
7476
display: none;
7577
}
7678

@@ -119,7 +121,8 @@
119121
left: 222px;
120122
top: 98px;
121123
}
122-
.pizza__topping--basil:nth-child(4), .pizza__topping--basil:nth-child(5) {
124+
.pizza__topping--basil:nth-child(4),
125+
.pizza__topping--basil:nth-child(5) {
123126
display: none;
124127
}
125128

@@ -167,7 +170,8 @@
167170
left: 162px;
168171
top: 8px;
169172
}
170-
.pizza__topping--mozzarella:nth-child(4), .pizza__topping--mozzarella:nth-child(5) {
173+
.pizza__topping--mozzarella:nth-child(4),
174+
.pizza__topping--mozzarella:nth-child(5) {
171175
display: none;
172176
}
173177
.pizza__topping--mushroom {
@@ -314,7 +318,8 @@
314318
left: 212px;
315319
top: 146px;
316320
}
317-
.pizza__topping--sweetcorn:nth-child(4), .pizza__topping--sweetcorn:nth-child(5) {
321+
.pizza__topping--sweetcorn:nth-child(4),
322+
.pizza__topping--sweetcorn:nth-child(5) {
318323
display: none;
319324
}
320325

@@ -342,3 +347,20 @@
342347
.pizza__topping--tomato:nth-child(5) {
343348
display: none;
344349
}
350+
351+
@keyframes fallIn {
352+
0% {
353+
transform: translateY(-100px);
354+
opacity: 0;
355+
}
356+
70% {
357+
transform: translateY(0);
358+
opacity: 1;
359+
}
360+
90% {
361+
transform: translateY(-10px);
362+
}
363+
100% {
364+
transform: translateY(0);
365+
}
366+
}

‎final/11-tests/progressive-pizza/app/components/PizzaPreview/PizzaPreview.css

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
position: absolute;
5252
background-repeat: no-repeat;
5353
background-size: contain;
54+
animation: fallIn 0.4s ease-in;
5455
}
5556

5657
.pizza__topping--anchovy {
@@ -70,7 +71,8 @@
7071
left: 263px;
7172
top: 95px;
7273
}
73-
.pizza__topping--anchovy:nth-child(4), .pizza__topping--anchovy:nth-child(5) {
74+
.pizza__topping--anchovy:nth-child(4),
75+
.pizza__topping--anchovy:nth-child(5) {
7476
display: none;
7577
}
7678

@@ -119,7 +121,8 @@
119121
left: 222px;
120122
top: 98px;
121123
}
122-
.pizza__topping--basil:nth-child(4), .pizza__topping--basil:nth-child(5) {
124+
.pizza__topping--basil:nth-child(4),
125+
.pizza__topping--basil:nth-child(5) {
123126
display: none;
124127
}
125128

@@ -167,7 +170,8 @@
167170
left: 162px;
168171
top: 8px;
169172
}
170-
.pizza__topping--mozzarella:nth-child(4), .pizza__topping--mozzarella:nth-child(5) {
173+
.pizza__topping--mozzarella:nth-child(4),
174+
.pizza__topping--mozzarella:nth-child(5) {
171175
display: none;
172176
}
173177
.pizza__topping--mushroom {
@@ -314,7 +318,8 @@
314318
left: 212px;
315319
top: 146px;
316320
}
317-
.pizza__topping--sweetcorn:nth-child(4), .pizza__topping--sweetcorn:nth-child(5) {
321+
.pizza__topping--sweetcorn:nth-child(4),
322+
.pizza__topping--sweetcorn:nth-child(5) {
318323
display: none;
319324
}
320325

@@ -342,3 +347,20 @@
342347
.pizza__topping--tomato:nth-child(5) {
343348
display: none;
344349
}
350+
351+
@keyframes fallIn {
352+
0% {
353+
transform: translateY(-100px);
354+
opacity: 0;
355+
}
356+
70% {
357+
transform: translateY(0);
358+
opacity: 1;
359+
}
360+
90% {
361+
transform: translateY(-10px);
362+
}
363+
100% {
364+
transform: translateY(0);
365+
}
366+
}

0 commit comments

Comments
 (0)