├── main.py
├── index.html
├── README.md
├── main.css.map
├── main.css
└── main.scss
/main.py:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | !
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Music-App
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/main.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EARF;IASI;IACA;;;;AAIJ;EACE;EACA;EACA;EAGA;EACA;EACA;;AACA;EATF;IAUI;IACA;IACA;IACA;IACA;IACA;;;AAEF;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EAZF;IAaI;IACA;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAdF;IAeI;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEA;IACE;IACA;;;AAKN;EACE;IACE;;EAEA;IACE;IACA;;;AAKN;EACE;EACA;;AAGF;EACE;EACA;EAGA;EACA;EACA;EACA;EACA;;AACA;EAVF;IAWI;IACA;IACA;;;AAEF;EACE;;AAKF;EACE;;;AAMV;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;IACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;IACA;;;AAIJ;EAtBF;IAuBI;IACA;IACA;IACA;;EAEA;IACE;IACA;;;;AAON;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAMF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"main.css"}
2 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #dfe7ef;
3 | font-family: "Bitter", serif;
4 | }
5 |
6 | * {
7 | box-sizing: border-box;
8 | }
9 |
10 | .icon {
11 | display: inline-block;
12 | width: 1em;
13 | height: 1em;
14 | stroke-width: 0;
15 | stroke: currentColor;
16 | fill: currentColor;
17 | }
18 |
19 | .wrapper {
20 | width: 100%;
21 | display: flex;
22 | align-items: center;
23 | justify-content: center;
24 | min-height: 100vh;
25 | background-size: cover;
26 | }
27 | @media screen and (max-width: 700px), (max-height: 500px) {
28 | .wrapper {
29 | flex-wrap: wrap;
30 | flex-direction: column;
31 | }
32 | }
33 |
34 |
35 | .player {
36 | background: #eef3f7;
37 | width: 410px;
38 | min-height: 480px;
39 | box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32);
40 | border-radius: 15px;
41 | padding: 30px;
42 | }
43 | @media screen and (max-width: 576px), (max-height: 500px) {
44 | .player {
45 | width: 95%;
46 | padding: 20px;
47 | margin-top: 75px;
48 | min-height: initial;
49 | padding-bottom: 30px;
50 | max-width: 400px;
51 | }
52 | }
53 | .player__top {
54 | display: flex;
55 | align-items: flex-start;
56 | position: relative;
57 | z-index: 4;
58 | }
59 | @media screen and (max-width: 576px), (max-height: 500px) {
60 | .player__top {
61 | flex-wrap: wrap;
62 | }
63 | }
64 | .player-cover {
65 | width: 300px;
66 | height: 300px;
67 | margin-left: -70px;
68 | flex-shrink: 0;
69 | position: relative;
70 | z-index: 2;
71 | border-radius: 15px;
72 | z-index: 1;
73 | }
74 | @media screen and (max-width: 576px), (max-height: 500px) {
75 | .player-cover {
76 | margin-top: -70px;
77 | margin-bottom: 25px;
78 | width: 290px;
79 | height: 230px;
80 | margin-left: auto;
81 | margin-right: auto;
82 | }
83 | }
84 | .player-cover__item {
85 | background-repeat: no-repeat;
86 | background-position: center;
87 | background-size: cover;
88 | width: 100%;
89 | height: 100%;
90 | border-radius: 15px;
91 | position: absolute;
92 | left: 0;
93 | top: 0;
94 | }
95 | .player-cover__item:before {
96 | content: "";
97 | background: inherit;
98 | width: 100%;
99 | height: 100%;
100 | box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
101 | display: block;
102 | z-index: 1;
103 | position: absolute;
104 | top: 30px;
105 | transform: scale(0.9);
106 | filter: blur(10px);
107 | opacity: 0.9;
108 | border-radius: 15px;
109 | }
110 | .player-cover__item:after {
111 | content: "";
112 | background: inherit;
113 | width: 100%;
114 | height: 100%;
115 | box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
116 | display: block;
117 | z-index: 2;
118 | position: absolute;
119 | border-radius: 15px;
120 | }
121 | .player-cover__img {
122 | width: 100%;
123 | height: 100%;
124 | object-fit: cover;
125 | border-radius: 15px;
126 | box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
127 | user-select: none;
128 | pointer-events: none;
129 | }
130 | .player-controls {
131 | flex: 1;
132 | padding-left: 20px;
133 | display: flex;
134 | flex-direction: column;
135 | align-items: center;
136 | }
137 | @media screen and (max-width: 576px), (max-height: 500px) {
138 | .player-controls {
139 | flex-direction: row;
140 | padding-left: 0;
141 | width: 100%;
142 | flex: unset;
143 | }
144 | }
145 | .player-controls__item {
146 | display: inline-flex;
147 | font-size: 30px;
148 | padding: 5px;
149 | margin-bottom: 10px;
150 | color: #acb8cc;
151 | cursor: pointer;
152 | width: 50px;
153 | height: 50px;
154 | align-items: center;
155 | justify-content: center;
156 | position: relative;
157 | transition: all 0.3s ease-in-out;
158 | }
159 | @media screen and (max-width: 576px), (max-height: 500px) {
160 | .player-controls__item {
161 | font-size: 26px;
162 | padding: 5px;
163 | margin-right: 10px;
164 | color: #acb8cc;
165 | cursor: pointer;
166 | width: 40px;
167 | height: 40px;
168 | margin-bottom: 0;
169 | }
170 | }
171 | .player-controls__item::before {
172 | content: "";
173 | position: absolute;
174 | width: 100%;
175 | height: 100%;
176 | border-radius: 50%;
177 | background: #fff;
178 | transform: scale(0.5);
179 | opacity: 0;
180 | box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2);
181 | transition: all 0.3s ease-in-out;
182 | transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88);
183 | }
184 | @media screen and (min-width: 500px) {
185 | .player-controls__item:hover {
186 | color: #532ab9;
187 | }
188 | .player-controls__item:hover::before {
189 | opacity: 1;
190 | transform: scale(1.3);
191 | }
192 | }
193 | @media screen and (max-width: 576px), (max-height: 500px) {
194 | .player-controls__item:active {
195 | color: #532ab9;
196 | }
197 | .player-controls__item:active::before {
198 | opacity: 1;
199 | transform: scale(1.3);
200 | }
201 | }
202 | .player-controls__item .icon {
203 | position: relative;
204 | z-index: 2;
205 | }
206 | .player-controls__item.-xl {
207 | margin-bottom: 0;
208 | font-size: 95px;
209 | filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45));
210 | color: #fff;
211 | width: auto;
212 | height: auto;
213 | display: inline-flex;
214 | }
215 | @media screen and (max-width: 576px), (max-height: 500px) {
216 | .player-controls__item.-xl {
217 | margin-left: auto;
218 | font-size: 75px;
219 | margin-right: 0;
220 | }
221 | }
222 | .player-controls__item.-xl:before {
223 | display: none;
224 | }
225 | .player-controls__item.-favorite.active {
226 | color: red;
227 | }
228 |
229 | [v-cloak] {
230 | display: none;
231 | }
232 |
233 | [v-cloak] > * {
234 | display: none;
235 | }
236 |
237 | .progress {
238 | width: 100%;
239 | margin-top: -15px;
240 | user-select: none;
241 | }
242 | .progress__top {
243 | display: flex;
244 | align-items: flex-end;
245 | justify-content: space-between;
246 | }
247 | .progress__duration {
248 | color: #71829e;
249 | font-weight: 700;
250 | font-size: 20px;
251 | opacity: 0.5;
252 | }
253 | .progress__time {
254 | margin-top: 2px;
255 | color: #71829e;
256 | font-weight: 700;
257 | font-size: 16px;
258 | opacity: 0.7;
259 | }
260 |
261 | .progress__bar {
262 | height: 6px;
263 | width: 100%;
264 | cursor: pointer;
265 | background-color: #d0d8e6;
266 | display: inline-block;
267 | border-radius: 10px;
268 | }
269 |
270 | .progress__current {
271 | height: inherit;
272 | width: 0%;
273 | background-color: #a3b3ce;
274 | border-radius: 10px;
275 | }
276 |
277 | .album-info {
278 | color: #71829e;
279 | flex: 1;
280 | padding-right: 60px;
281 | user-select: none;
282 | }
283 | @media screen and (max-width: 576px), (max-height: 500px) {
284 | .album-info {
285 | padding-right: 30px;
286 | }
287 | }
288 | .album-info__name {
289 | font-size: 20px;
290 | font-weight: bold;
291 | margin-bottom: 12px;
292 | line-height: 1.3em;
293 | }
294 | @media screen and (max-width: 576px), (max-height: 500px) {
295 | .album-info__name {
296 | font-size: 18px;
297 | margin-bottom: 9px;
298 | }
299 | }
300 | .album-info__track {
301 | font-weight: 400;
302 | font-size: 20px;
303 | opacity: 0.7;
304 | line-height: 1.3em;
305 | min-height: 52px;
306 | }
307 | @media screen and (max-width: 576px), (max-height: 500px) {
308 | .album-info__track {
309 | font-size: 18px;
310 | min-height: 50px;
311 | }
312 | }
313 |
314 | .github-btn {
315 | position: absolute;
316 | right: 40px;
317 | bottom: 50px;
318 | text-decoration: none;
319 | padding: 15px 25px;
320 | border-radius: 4px;
321 | box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65);
322 | background: #24292e;
323 | color: #fff;
324 | font-weight: bold;
325 | letter-spacing: 1px;
326 | font-size: 16px;
327 | transition: all 0.3s ease-in-out;
328 | }
329 | @media screen and (min-width: 500px) {
330 | .github-btn:hover {
331 | transform: scale(1.1);
332 | box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
333 | }
334 | }
335 | @media screen and (max-width: 700px) {
336 | .github-btn {
337 | position: relative;
338 | bottom: auto;
339 | right: auto;
340 | margin-top: 20px;
341 | }
342 | .github-btn:active {
343 | transform: scale(1.1);
344 | box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
345 | }
346 | }
347 |
348 | .scale-out-enter-active {
349 | transition: all 0.35s ease-in-out;
350 | }
351 |
352 | .scale-out-leave-active {
353 | transition: all 0.35s ease-in-out;
354 | }
355 |
356 | .scale-out-enter {
357 | transform: scale(0.55);
358 | pointer-events: none;
359 | opacity: 0;
360 | }
361 |
362 | .scale-out-leave-to {
363 | transform: scale(1.2);
364 | pointer-events: none;
365 | opacity: 0;
366 | }
367 |
368 | .scale-in-enter-active {
369 | transition: all 0.35s ease-in-out;
370 | }
371 |
372 | .scale-in-leave-active {
373 | transition: all 0.35s ease-in-out;
374 | }
375 |
376 | .scale-in-enter {
377 | transform: scale(1.2);
378 | pointer-events: none;
379 | opacity: 0;
380 | }
381 |
382 | .scale-in-leave-to {
383 | transform: scale(0.55);
384 | pointer-events: none;
385 | opacity: 0;
386 | }
387 |
--------------------------------------------------------------------------------
/main.scss:
--------------------------------------------------------------------------------
1 | body {
2 | // background: #e1e7ec;
3 | background: #dfe7ef;
4 | font-family: "Bitter", serif;
5 | }
6 |
7 | * {
8 |
9 | box-sizing: border-box;
10 | }
11 |
12 | .icon {
13 | display: inline-block;
14 | width: 1em;
15 | height: 1em;
16 | stroke-width: 0;
17 | stroke: currentColor;
18 | fill: currentColor;
19 | }
20 |
21 | .wrapper {
22 | width: 100%;
23 | display: flex;
24 | align-items: center;
25 | justify-content: center;
26 | min-height: 100vh;
27 | // background: url(../img/bg.png) no-repeat center;
28 | background-size: cover;
29 | @media screen and (max-width: 700px), (max-height: 500px) {
30 | flex-wrap: wrap;
31 | flex-direction: column;
32 | }
33 | }
34 |
35 | .player {
36 | background: #eef3f7;
37 | width: 410px;
38 | min-height: 480px;
39 | // box-shadow: 0px 55px 75px -10px rgba(76, 70, 124, 0.5);
40 | // box-shadow: 0px 55px 105px 10px rgba(76, 70, 124, 0.35);
41 | box-shadow: 0px 15px 35px -5px rgba(50, 88, 130, 0.32);
42 | border-radius: 15px;
43 | padding: 30px;
44 | @media screen and (max-width: 576px), (max-height: 500px) {
45 | width: 95%;
46 | padding: 20px;
47 | margin-top: 75px;
48 | min-height: initial;
49 | padding-bottom: 30px;
50 | max-width: 400px;
51 | }
52 | &__top {
53 | display: flex;
54 | align-items: flex-start;
55 | position: relative;
56 | z-index: 4;
57 | @media screen and (max-width: 576px), (max-height: 500px) {
58 | flex-wrap: wrap;
59 | }
60 | }
61 |
62 | &-cover {
63 | width: 300px;
64 | height: 300px;
65 | margin-left: -70px;
66 | flex-shrink: 0;
67 | position: relative;
68 | z-index: 2;
69 | border-radius: 15px;
70 | // transform: perspective(512px) translate3d(0, 0, 0);
71 | // transition: all .4s cubic-bezier(.125, .625, .125, .875);
72 | z-index: 1;
73 |
74 | @media screen and (max-width: 576px), (max-height: 500px) {
75 | margin-top: -70px;
76 | margin-bottom: 25px;
77 | width: 290px;
78 | height: 230px;
79 | margin-left: auto;
80 | margin-right: auto;
81 | }
82 |
83 | &__item {
84 | background-repeat: no-repeat;
85 | background-position: center;
86 | background-size: cover;
87 | width: 100%;
88 | height: 100%;
89 | border-radius: 15px;
90 | position: absolute;
91 | left: 0;
92 | top: 0;
93 |
94 | &:before {
95 | content: "";
96 | background: inherit;
97 | width: 100%;
98 | height: 100%;
99 | box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
100 | display: block;
101 | z-index: 1;
102 | position: absolute;
103 | top: 30px;
104 | transform: scale(0.9);
105 | filter: blur(10px);
106 | opacity: 0.9;
107 | border-radius: 15px;
108 | }
109 |
110 | &:after {
111 | content: "";
112 | background: inherit;
113 | width: 100%;
114 | height: 100%;
115 | box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
116 | display: block;
117 | z-index: 2;
118 | position: absolute;
119 | border-radius: 15px;
120 | }
121 | }
122 |
123 | &__img {
124 | width: 100%;
125 | height: 100%;
126 | object-fit: cover;
127 | border-radius: 15px;
128 | box-shadow: 0px 10px 40px 0px rgba(76, 70, 124, 0.5);
129 | user-select: none;
130 | pointer-events: none;
131 | }
132 | }
133 |
134 | &-controls {
135 | flex: 1;
136 | padding-left: 20px;
137 | display: flex;
138 | flex-direction: column;
139 | align-items: center;
140 |
141 | @media screen and (max-width: 576px), (max-height: 500px) {
142 | flex-direction: row;
143 | padding-left: 0;
144 | width: 100%;
145 | flex: unset;
146 | }
147 |
148 | &__item {
149 | display: inline-flex;
150 | font-size: 30px;
151 | padding: 5px;
152 | margin-bottom: 10px;
153 | color: #acb8cc;
154 | cursor: pointer;
155 | width: 50px;
156 | height: 50px;
157 | align-items: center;
158 | justify-content: center;
159 | position: relative;
160 | transition: all 0.3s ease-in-out;
161 |
162 | @media screen and (max-width: 576px), (max-height: 500px) {
163 | font-size: 26px;
164 | padding: 5px;
165 | margin-right: 10px;
166 | color: #acb8cc;
167 | cursor: pointer;
168 | width: 40px;
169 | height: 40px;
170 | margin-bottom: 0;
171 | }
172 |
173 | &::before {
174 | content: "";
175 | position: absolute;
176 | width: 100%;
177 | height: 100%;
178 | border-radius: 50%;
179 | background: #fff;
180 | transform: scale(0.5);
181 | opacity: 0;
182 | box-shadow: 0px 5px 10px 0px rgba(76, 70, 124, 0.2);
183 | transition: all 0.3s ease-in-out;
184 | transition: all 0.4s cubic-bezier(0.35, 0.57, 0.13, 0.88);
185 | }
186 |
187 | @media screen and (min-width: 500px) {
188 | &:hover {
189 | color: #532ab9;
190 |
191 | &::before {
192 | opacity: 1;
193 | transform: scale(1.3);
194 | }
195 | }
196 | }
197 |
198 | @media screen and (max-width: 576px), (max-height: 500px) {
199 | &:active {
200 | color: #532ab9;
201 |
202 | &::before {
203 | opacity: 1;
204 | transform: scale(1.3);
205 | }
206 | }
207 | }
208 |
209 | .icon {
210 | position: relative;
211 | z-index: 2;
212 | }
213 |
214 | &.-xl {
215 | margin-bottom: 0;
216 | font-size: 95px;
217 | // filter: drop-shadow(0 2px 8px rgba(172, 184, 204, 0.3));
218 | // filter: drop-shadow(0 9px 6px rgba(172, 184, 204, 0.35));
219 | filter: drop-shadow(0 11px 6px rgba(172, 184, 204, 0.45));
220 | color: #fff;
221 | width: auto;
222 | height: auto;
223 | display: inline-flex;
224 | @media screen and (max-width: 576px), (max-height: 500px) {
225 | margin-left: auto;
226 | font-size: 75px;
227 | margin-right: 0;
228 | }
229 | &:before {
230 | display: none;
231 | }
232 | }
233 |
234 | &.-favorite {
235 | &.active {
236 | color: red;
237 | }
238 | }
239 | }
240 | }
241 | }
242 | [v-cloak] {
243 | display: none;
244 | }
245 | [v-cloak] > * {
246 | display: none;
247 | }
248 | .progress {
249 | width: 100%;
250 | margin-top: -15px;
251 | user-select: none;
252 | &__top {
253 | display: flex;
254 | align-items: flex-end;
255 | justify-content: space-between;
256 | }
257 |
258 | &__duration {
259 | color: #71829e;
260 | font-weight: 700;
261 | font-size: 20px;
262 | opacity: 0.5;
263 | }
264 | &__time {
265 | margin-top: 2px;
266 | color: #71829e;
267 | font-weight: 700;
268 | font-size: 16px;
269 | opacity: 0.7;
270 | }
271 | }
272 | .progress__bar {
273 | height: 6px;
274 | width: 100%;
275 | cursor: pointer;
276 | background-color: #d0d8e6;
277 | display: inline-block;
278 | border-radius: 10px;
279 | }
280 | .progress__current {
281 | height: inherit;
282 | width: 0%;
283 | background-color: #a3b3ce;
284 | border-radius: 10px;
285 | }
286 |
287 | .album-info {
288 | color: #71829e;
289 | flex: 1;
290 | padding-right: 60px;
291 | user-select: none;
292 |
293 | @media screen and (max-width: 576px), (max-height: 500px) {
294 | padding-right: 30px;
295 | }
296 |
297 | &__name {
298 | font-size: 20px;
299 | font-weight: bold;
300 | margin-bottom: 12px;
301 | line-height: 1.3em;
302 | @media screen and (max-width: 576px), (max-height: 500px) {
303 | font-size: 18px;
304 | margin-bottom: 9px;
305 | }
306 | }
307 | &__track {
308 | font-weight: 400;
309 | font-size: 20px;
310 | opacity: 0.7;
311 | line-height: 1.3em;
312 | min-height: 52px;
313 | @media screen and (max-width: 576px), (max-height: 500px) {
314 | font-size: 18px;
315 | min-height: 50px;
316 | }
317 | }
318 | }
319 |
320 | .github-btn {
321 | position: absolute;
322 | right: 40px;
323 | bottom: 50px;
324 | text-decoration: none;
325 | padding: 15px 25px;
326 | border-radius: 4px;
327 | box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65);
328 | background: #24292e;
329 | color: #fff;
330 | font-weight: bold;
331 | letter-spacing: 1px;
332 | font-size: 16px;
333 | transition: all .3s ease-in-out;
334 |
335 | @media screen and (min-width: 500px) {
336 | &:hover {
337 | transform: scale(1.1);
338 | box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
339 | }
340 | }
341 |
342 | @media screen and (max-width: 700px) {
343 | position: relative;
344 | bottom: auto;
345 | right: auto;
346 | margin-top: 20px;
347 |
348 | &:active {
349 | transform: scale(1.1);
350 | box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
351 | }
352 | }
353 | }
354 |
355 | //scale out
356 |
357 | .scale-out-enter-active {
358 | transition: all .35s ease-in-out;
359 | }
360 | .scale-out-leave-active {
361 | transition: all .35s ease-in-out;
362 | }
363 | .scale-out-enter {
364 | transform: scale(.55);
365 | pointer-events: none;
366 | opacity: 0;
367 | }
368 | .scale-out-leave-to {
369 | transform: scale(1.2);
370 | pointer-events: none;
371 | opacity: 0;
372 | }
373 |
374 |
375 | //scale in
376 |
377 | .scale-in-enter-active {
378 | transition: all .35s ease-in-out;
379 | }
380 | .scale-in-leave-active {
381 | transition: all .35s ease-in-out;
382 | }
383 | .scale-in-enter {
384 | transform: scale(1.2);
385 | pointer-events: none;
386 | opacity: 0;
387 | }
388 | .scale-in-leave-to {
389 | transform: scale(.55);
390 | pointer-events: none;
391 | opacity: 0;
392 | }
393 |
--------------------------------------------------------------------------------