mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-27 08:29:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge 5ef4d92569 into 240eb04fd4

Browse Source
This commit is contained in:
waylaidwanderer 2014-09-30 07:24:03 +00:00
commit 23893911d5
3 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css-compiled/ripples.css
View File

@ -29,14 +29,18 @@
opacity: 0; opacity: 0;
} }
.ripple.ripple-on { .ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; visibility: visible;
-ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1; opacity: 1;
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
-ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
-moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
transition: opacity 0.15s ease-in 0s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
} }
.ripple.ripple-out { .ripple.ripple-out {
-webkit-transition: opacity 0.1s linear 0s !important; visibility: hidden;
transition: opacity 0.1s linear 0s !important;
opacity: 0; opacity: 0;
-webkit-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
-ms-transition: opacity 0s 0.1s, opacity 0.1s linear !important;
-moz-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
transition: visibility 0s 0.1s, opacity 0.1s linear !important;
} }

20
less/ripples.less
View File

@ -30,14 +30,18 @@
opacity: 0; opacity: 0;
} }
.ripple.ripple-on { .ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; visibility: visible;
-ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; opacity: 1;
-moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
opacity: 1; -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
transition: opacity 0.15s ease-in 0s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
} }
.ripple.ripple-out { .ripple.ripple-out {
-webkit-transition: opacity 0.1s linear 0s !important; visibility: hidden;
transition: opacity 0.1s linear 0s !important; opacity: 0;
opacity: 0; -webkit-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
-ms-transition: opacity 0s 0.1s, opacity 0.1s linear !important;
-moz-transition: visibility 0s 0.1s, opacity 0.1s linear !important;
transition: visibility 0s 0.1s, opacity 0.1s linear !important;
} }

16
scripts/ripples.js
View File

@ -12,7 +12,7 @@ var ripples = {
// animations time // animations time
var rippleOutTime = 100, var rippleOutTime = 100,
rippleStartTime = 500; rippleStartTime = 400;
// 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) {
@ -35,7 +35,7 @@ var ripples = {
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
refreshElementStyle; refreshElementStyle;
// Set ripple class // Set ripple class
$ripple.className = "ripple"; $ripple.className = "ripple";
@ -58,7 +58,10 @@ var ripples = {
// Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event // Dirty fix for Firefox... seems like absolute elements inside <A> tags do not trigger the "click" event
if (/firefox|crios|(^(?!.*chrome).*safari)|ip(ad|hone|od)/i.test(navigator.userAgent)) { if (/firefox|crios|(^(?!.*chrome).*safari)|ip(ad|hone|od)/i.test(navigator.userAgent)) {
$el.click(); var button = e.which || e.button;
if (button == 1) {
$el.click();
}
} }
// This function is called when the animation is finished // This function is called when the animation is finished
@ -78,7 +81,7 @@ var ripples = {
// Let ripple fade out (with CSS) // Let ripple fade out (with CSS)
setTimeout(function() { setTimeout(function() {
$ripple.remove(); $ripple.remove();
}, rippleOutTime); }, rippleOutTime);
}; };
@ -107,16 +110,15 @@ var ripples = {
// Events handler // Events handler
// init RippleJS and start ripple effect on mousedown // init RippleJS and start ripple effect on mousedown
bind("mousedown", withRipple, rippleInit); bind("mousedown", withRipple, rippleInit);
// start ripple effect on mousedown // start ripple effect on mousedown
bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart); bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart);
// if animation ends and user is not holding mouse then destroy the ripple // if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
if (!mouseDown) { if (!mouseDown || !$($ripple).is(":first-child")) {
rippleOut($ripple); rippleOut($ripple);
} }
}); });
// Destroy ripple when mouse is not holded anymore if the ripple still exists // Destroy ripple when mouse is not held anymore if the ripple still exists
bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) { bind("mouseup", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
if ($ripple.dataset.animating != 1) { if ($ripple.dataset.animating != 1) {
rippleOut($ripple); rippleOut($ripple);