Skip to content

Commit 8885f05

Browse files
cristijoracristijora
committed
Improve notification transitions. Make notification appear more snappy
1 parent d5ce2e3 commit 8885f05

File tree

4 files changed

+33
-34
lines changed

4 files changed

+33
-34
lines changed

‎themes/default.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
/* light colors - used for select dropdown */
2+
.list-move {
3+
transition: transform 0.3s, opacity 0.4s; }
4+
25
.list-item {
3-
opacity: 1;
6+
display: inline-block;
47
margin-right: 10px; }
58

6-
.list-enter-active,
7-
.list-leave-active {
8-
transition: all 0.4s; }
9+
.list-enter-active, .list-leave-active {
10+
transition: opacity 0.4s; }
911

10-
.list-enter,
11-
.list-leave-to {
12-
opacity: 0;
13-
transform: translateY(-30px); }
12+
.list-enter, .list-leave-to {
13+
opacity: 0; }
1414

1515
.fade-enter-active,
1616
.fade-leave-active {

‎themes/material.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@ $brand-info: #5bc0de !default;
44
$brand-warning: #f0ad4e !default;
55
$brand-danger: #d9534f !default;*/
66
/* SHADOWS */
7+
.list-move {
8+
transition: transform 0.3s, opacity 0.4s; }
9+
710
.list-item {
8-
opacity: 1;
11+
display: inline-block;
912
margin-right: 10px; }
1013

11-
.list-enter-active,
12-
.list-leave-active {
13-
transition: all 0.4s; }
14+
.list-enter-active, .list-leave-active {
15+
transition: opacity 0.4s; }
1416

15-
.list-enter,
16-
.list-leave-to {
17-
opacity: 0;
18-
transform: translateY(-30px); }
17+
.list-enter, .list-leave-to {
18+
opacity: 0; }
1919

2020
.fade-enter-active,
2121
.fade-leave-active {

‎themes/now-ui.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1+
.list-move {
2+
transition: transform 0.3s, opacity 0.4s; }
3+
14
.list-item {
2-
opacity: 1;
5+
display: inline-block;
36
margin-right: 10px; }
47

5-
.list-enter-active,
6-
.list-leave-active {
7-
transition: all 0.4s; }
8+
.list-enter-active, .list-leave-active {
9+
transition: opacity 0.4s; }
810

9-
.list-enter,
10-
.list-leave-to {
11-
opacity: 0;
12-
transform: translateY(-30px); }
11+
.list-enter, .list-leave-to {
12+
opacity: 0; }
1313

1414
.fade-enter-active,
1515
.fade-leave-active {

‎themes/transitions/_transitions.scss‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1+
.list-move {
2+
transition: transform 0.3s, opacity 0.4s;
3+
}
14
.list-item {
2-
opacity: 1;
5+
display: inline-block;
36
margin-right: 10px;
7+
48
}
5-
.list-enter-active,
6-
.list-leave-active {
7-
transition: all 0.4s;
9+
.list-enter-active, .list-leave-active {
10+
transition: opacity 0.4s;
811
}
9-
10-
.list-enter,
11-
.list-leave-to
12-
/* .list-leave-active for <2.1.8 */
13-
{
12+
.list-enter, .list-leave-to /* .list-leave-active for <2.1.8 */ {
1413
opacity: 0;
15-
transform: translateY(-30px);
1614
}
15+
1716
.fade-enter-active,
1817
.fade-leave-active {
1918
transition: opacity .3s

0 commit comments

Comments
 (0)