mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-01-31 03:34:15 +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; opacity: 1;
} }
.ripple.ripple-out { .ripple.ripple-out {
-webkit-transition: opacity 1s linear 0s !important; -webkit-transition: opacity 0.1s linear 0s !important;
transition: opacity 0.8s linear 0s !important; transition: opacity 0.1s linear 0s !important;
opacity: 0; opacity: 0;
} }

4
less/ripples.less
View File

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

8
scripts/ripples.js
View File

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