mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-27 08:29:53 +03:00
Merge 5ef4d92569
into 240eb04fd4
This commit is contained in:
commit
23893911d5
|
@ -29,14 +29,18 @@
|
|||
opacity: 0;
|
||||
}
|
||||
.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;
|
||||
-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;
|
||||
visibility: visible;
|
||||
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 {
|
||||
-webkit-transition: opacity 0.1s linear 0s !important;
|
||||
transition: opacity 0.1s linear 0s !important;
|
||||
visibility: hidden;
|
||||
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;
|
||||
}
|
||||
|
|
|
@ -30,14 +30,18 @@
|
|||
opacity: 0;
|
||||
}
|
||||
.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;
|
||||
-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;
|
||||
visibility: visible;
|
||||
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 {
|
||||
-webkit-transition: opacity 0.1s linear 0s !important;
|
||||
transition: opacity 0.1s linear 0s !important;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
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;
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@ var ripples = {
|
|||
|
||||
// animations time
|
||||
var rippleOutTime = 100,
|
||||
rippleStartTime = 500;
|
||||
rippleStartTime = 400;
|
||||
|
||||
// Helper to bind events on dynamically created elements
|
||||
var bind = function(event, selector, callback) {
|
||||
|
@ -35,7 +35,7 @@ var ripples = {
|
|||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
refreshElementStyle;
|
||||
refreshElementStyle;
|
||||
|
||||
// Set ripple class
|
||||
$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
|
||||
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
|
||||
|
@ -78,7 +81,7 @@ var ripples = {
|
|||
|
||||
// Let ripple fade out (with CSS)
|
||||
setTimeout(function() {
|
||||
$ripple.remove();
|
||||
$ripple.remove();
|
||||
}, rippleOutTime);
|
||||
};
|
||||
|
||||
|
@ -107,16 +110,15 @@ var ripples = {
|
|||
// Events handler
|
||||
// init RippleJS and start ripple effect on mousedown
|
||||
bind("mousedown", withRipple, rippleInit);
|
||||
|
||||
// start ripple effect on mousedown
|
||||
bind("mousedown", ".ripple-wrapper, .ripple-wrapper .ripple", rippleStart);
|
||||
// if animation ends and user is not holding mouse then destroy the ripple
|
||||
bind("rippleEnd", ".ripple-wrapper, .ripple-wrapper .ripple", function(e, $ripple) {
|
||||
if (!mouseDown) {
|
||||
if (!mouseDown || !$($ripple).is(":first-child")) {
|
||||
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) {
|
||||
if ($ripple.dataset.animating != 1) {
|
||||
rippleOut($ripple);
|
||||
|
|
Loading…
Reference in New Issue
Block a user