mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-01-30 19:24:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

improved transitions.

Browse Source
This commit is contained in:
Federico Zivolo 2014-08-25 13:57:22 +02:00
parent c2d4a54b53
commit 96d11df81f
3 changed files with 99 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css-compiled/ripples.css
View File

@ -36,7 +36,7 @@
opacity: 1;
}
.ripple.ripple-out {
-webkit-transition: opacity 1s linear 0s !important;
transition: opacity 0.8s linear 0s !important;
-webkit-transition: opacity 0.1s linear 0s !important;
transition: opacity 0.1s linear 0s !important;
opacity: 0;
}

4
less/ripples.less
View File

@ -37,7 +37,7 @@
opacity: 1;
}
.ripple.ripple-out {
-webkit-transition: opacity 1s linear 0s !important;
transition: opacity 0.8s linear 0s !important;
-webkit-transition: opacity 0.1s linear 0s !important;
transition: opacity 0.1s linear 0s !important;
opacity: 0;
}

8
scripts/ripples.js
View File

@ -3,6 +3,10 @@ var ripples = {
init : function(withRipple) {
"use strict";
// animations time
var rippleOutTime = 100,
rippleStartTime = 500;
// Helper to bind events on dynamically created elements
var bind = function(event, selector, callback) {
document.addEventListener(event, function(e) {
@ -52,7 +56,7 @@ var ripples = {
$ripple.dataset.animating = 0;
document.dispatchEvent(rippleEnd);
}, 500);
}, rippleStartTime);
};
@ -63,7 +67,7 @@ var ripples = {
// Let ripple fade out (with CSS)
setTimeout(function() {
$ripple.remove();
}, 1000);
}, rippleOutTime);
};
// Helper, need to know if mouse is up or down