Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/110675
Change subject: Add animation to NavigationPopups
......................................................................
Add animation to NavigationPopups
Change-Id: If6585e4ff6a52f3855f7823f2212099b9adbc252
---
M VectorBeta.php
M js/popup.js
A less/popup-animation.less
3 files changed, 100 insertions(+), 3 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VectorBeta
refs/changes/75/110675/1
diff --git a/VectorBeta.php b/VectorBeta.php
index 3070384..47c86d8 100644
--- a/VectorBeta.php
+++ b/VectorBeta.php
@@ -43,7 +43,8 @@
'js/popup.js',
),
'styles' => array(
- 'less/popup.less'
+ 'less/popup.less',
+ 'less/popup-animation.less',
),
'remoteExtPath' => $remoteExtPath,
'localBasePath' => $localBasePath,
diff --git a/js/popup.js b/js/popup.js
index 7cf5205..3e6833d 100644
--- a/js/popup.js
+++ b/js/popup.js
@@ -11,12 +11,25 @@
$marker = $( '<span>' ), api = new mw.Api(), $box;
function leaveActive () {
- timer = setTimeout( closeBox, 800 );
+ timer = setTimeout( closeBox, 500 );
}
function closeBox () {
$( currentLink ).removeClass( 'NP2hover' ).off( 'mouseleave',
leaveActive );
- $box.hide();
+
+ $box
+ .removeClass( 'mw-vector-beta-fade-out
mw-vector-beta-fade-in' )
+ .addClass( 'mw-vector-beta-fade-out' );
+
+ $box.on( 'webkitAnimationEnd oanimationend msAnimationEnd
animationend', function () {
+ if ( $( this ).hasClass( 'mw-vector-beta-fade-out' ) ) {
+ $( this )
+ .off( 'webkitAnimationEnd oanimationend
msAnimationEnd animationend' )
+ .removeClass( 'mw-vector-beta-fade-out'
)
+ .hide();
+ }
+ } );
+
if ( timer ){
clearTimeout( timer );
}
@@ -103,6 +116,10 @@
.append( bar.box )
.show();
+ $box
+ .removeClass( 'mw-vector-beta-fade-out
mw-vector-beta-fade-in' )
+ .addClass( 'mw-vector-beta-fade-in' );
+
$this.off( 'mouseleave', leaveInactive ).on(
'mouseleave', leaveActive );
}
diff --git a/less/popup-animation.less b/less/popup-animation.less
new file mode 100644
index 0000000..75ff648
--- /dev/null
+++ b/less/popup-animation.less
@@ -0,0 +1,79 @@
+.translate ( @x, @y ) {
+ -webkit-transform: translate(@x, @y);
+ -moz-transform: translate(@x, @y);
+ -ms-transform: translate(@x, @y);
+ -o-transform: translate(@x, @y);
+ transform: translate(@x, @y);
+}
+
+.animation ( @name, @duration ) {
+ -webkit-animation: @name @duration;
+ -moz-animation: @name @duration;
+ -ms-animation: @name @duration;
+ -o-animation: @name @duration;
+ animation: @name @duration;
+}
+
+@-webkit-keyframes mw-vector-beta-fade-in {
+ .mw-vector-beta-fade-in-frames;
+}
+
+@-moz-keyframes mw-vector-beta-fade-in {
+ .mw-vector-beta-fade-in-frames;
+}
+
+@-o-keyframes mw-vector-beta-fade-in {
+ .mw-vector-beta-fade-in-frames;
+}
+
+@keyframes mw-vector-beta-fade-in {
+ .mw-vector-beta-fade-in-frames;
+}
+
+@-webkit-keyframes mw-vector-beta-fade-out {
+ .mw-vector-beta-fade-out-frames;
+}
+
+@-moz-keyframes mw-vector-beta-fade-out {
+ .mw-vector-beta-fade-out-frames;
+}
+
+@-o-keyframes mw-vector-beta-fade-out {
+ .mw-vector-beta-fade-out-frames;
+}
+
+@keyframes mw-vector-beta-fade-out {
+ .mw-vector-beta-fade-out-frames;
+}
+
+.mw-vector-beta-fade-in-frames () {
+ 0% {
+ opacity: 0;
+ .translate(0, 20px);
+ }
+
+ 100% {
+ opacity: 1;
+ .translate(0, 0);
+ }
+}
+
+.mw-vector-beta-fade-out-frames () {
+ 0% {
+ opacity: 1;
+ .translate(0, 0);
+ }
+
+ 100% {
+ opacity: 0;
+ .translate(0, 20px);
+ }
+}
+
+.mw-vector-beta-fade-in {
+ .animation(mw-vector-beta-fade-in, 0.3s);
+}
+
+.mw-vector-beta-fade-out {
+ .animation(mw-vector-beta-fade-out, 0.3s);
+}
\ No newline at end of file
--
To view, visit https://gerrit.wikimedia.org/r/110675
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If6585e4ff6a52f3855f7823f2212099b9adbc252
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VectorBeta
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
