wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-24 07:34:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

animation: Add fade animations from other directions

Browse source 
1. fade-in-down
2. fade-out-up

Change-Id: I108b6bb6bbb8ac49401e9dc0d6599e57c42abf62
This commit is contained in:
Prateek Saxena 2014-05-27 17:12:47 +05:30
parent 8fa9d90ae9
commit a52242087f
1 changed files with 66 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
resources/ext.popups.animation.less
View file

@ -20,6 +20,8 @@
animation-fill-mode: forwards; /* when the spec is finished */ animation-fill-mode: forwards; /* when the spec is finished */
} }
/* FIXME: Use Phuedx's approach to make this cleaner
https://gist.github.com/phuedx/0639a279b6efb1a71474 */
@-webkit-keyframes mwe-popups-fade-in-up { @-webkit-keyframes mwe-popups-fade-in-up {
.mwe-popups-fade-in-up-frames; .mwe-popups-fade-in-up-frames;
} }
@ -36,6 +38,22 @@
.mwe-popups-fade-in-up-frames; .mwe-popups-fade-in-up-frames;
} }
@-webkit-keyframes mwe-popups-fade-in-down{
.mwe-popups-fade-in-down-frames;
}
@-moz-keyframes mwe-popups-fade-in-down {
.mwe-popups-fade-in-down-frames;
}
@-o-keyframes mwe-popups-fade-in-down {
.mwe-popups-fade-in-down-frames;
}
@keyframes mwe-popups-fade-in-down {
.mwe-popups-fade-in-down-frames;
}
@-webkit-keyframes mwe-popups-fade-out-down { @-webkit-keyframes mwe-popups-fade-out-down {
.mwe-popups-fade-out-down-frames; .mwe-popups-fade-out-down-frames;
} }
@ -52,6 +70,22 @@
.mwe-popups-fade-out-down-frames; .mwe-popups-fade-out-down-frames;
} }
@-webkit-keyframes mwe-popups-fade-out-up {
.mwe-popups-fade-out-up-frames;
}
@-moz-keyframes mwe-popups-fade-out-up {
.mwe-popups-fade-out-up-frames;
}
@-o-keyframes mwe-popups-fade-out-up {
.mwe-popups-fade-out-up-frames;
}
@keyframes mwe-popups-fade-out-up {
.mwe-popups-fade-out-up-frames;
}
.mwe-popups-fade-in-up-frames() { .mwe-popups-fade-in-up-frames() {
0% { 0% {
opacity: 0; opacity: 0;
@ -64,6 +98,18 @@
} }
} }
.mwe-popups-fade-in-down-frames() {
0% {
opacity: 0;
.mwe-popups-translate(0, -20px);
}
100% {
opacity: 1;
.mwe-popups-translate(0, 0);
}
}
.mwe-popups-fade-out-down-frames() { .mwe-popups-fade-out-down-frames() {
0% { 0% {
opacity: 1; opacity: 1;
@ -76,10 +122,30 @@
} }
} }
.mwe-popups-fade-out-up-frames() {
0% {
opacity: 1;
.mwe-popups-translate(0, 0);
}
100% {
opacity: 0;
.mwe-popups-translate(0, -20px);
}
}
.mwe-popups-fade-in-up { .mwe-popups-fade-in-up {
.mwe-popups-animation(mwe-popups-fade-in-up, 0.3s); .mwe-popups-animation(mwe-popups-fade-in-up, 0.3s);
} }
.mwe-popups-fade-in-down {
.mwe-popups-animation(mwe-popups-fade-in-down, 0.3s);
}
.mwe-popups-fade-out-down { .mwe-popups-fade-out-down {
.mwe-popups-animation(mwe-popups-fade-out-down, 0.15s); .mwe-popups-animation(mwe-popups-fade-out-down, 0.15s);
} }
.mwe-popups-fade-out-up {
.mwe-popups-animation(mwe-popups-fade-out-up, 0.15s);
}