Skip to content

Commit 96d11df

Browse files
author
Federico Zivolo
committed
improved transitions.
1 parent c2d4a54 commit 96d11df

3 files changed

Lines changed: 121 additions & 117 deletions

File tree

‎css-compiled/ripples.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
opacity: 1;
3737
}
3838
.ripple.ripple-out {
39-
-webkit-transition: opacity 1s linear 0s !important;
40-
transition: opacity 0.8s linear 0s !important;
39+
-webkit-transition: opacity 0.1s linear 0s !important;
40+
transition: opacity 0.1s linear 0s !important;
4141
opacity: 0;
4242
}

‎less/ripples.less‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// out: ../css-compiled/ripples.css
22

33
.withripple {
4-
position: relative;
4+
position: relative;
55
}
66
.ripple-wrapper {
77
position: absolute;
@@ -30,14 +30,14 @@
3030
opacity: 0;
3131
}
3232
.ripple.ripple-on {
33-
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
34-
-ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
35-
-moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
36-
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
37-
opacity: 1;
33+
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
34+
-ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
35+
-moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
36+
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
37+
opacity: 1;
3838
}
3939
.ripple.ripple-out {
40-
-webkit-transition: opacity 1s linear 0s !important;
41-
transition: opacity 0.8s linear 0s !important;
40+
-webkit-transition: opacity 0.1s linear 0s !important;
41+
transition: opacity 0.1s linear 0s !important;
4242
opacity: 0;
4343
}

‎scripts/ripples.js‎

Lines changed: 111 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,114 @@
11
/* globals CustomEvent */
22
var ripples = {
3-
init : function(withRipple) {
4-
"use strict";
5-
6-
// Helper to bind events on dynamically created elements
7-
var bind = function(event, selector, callback) {
8-
document.addEventListener(event, function(e) {
9-
var target = (typeof e.detail !== "number") ? e.detail : e.target;
10-
11-
if (target.matches(selector)) {
12-
callback(e, target);
13-
}
14-
});
15-
};
16-
17-
var rippleStart = function(e, target) {
18-
19-
// Init variables
20-
var $rippleWrapper = (target.matches(".ripple-wrapper")) ? target : target.parentNode,
21-
$el = $rippleWrapper.parentNode,
22-
$ripple = document.createElement("div"),
23-
elPos = $el.getBoundingClientRect(),
24-
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
25-
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
26-
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
27-
refreshElementStyle;
28-
29-
// Set ripple class
30-
$ripple.className = "ripple";
31-
32-
// Move ripple to the mouse position
33-
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
34-
35-
// Insert new ripple into ripple wrapper
36-
$rippleWrapper.appendChild($ripple);
37-
38-
// Make sure the ripple has the class applied (ugly hack but it works)
39-
refreshElementStyle = window.getComputedStyle($ripple).opacity;
40-
41-
// Let other funtions know that this element is animating
42-
$ripple.dataset.animating = 1;
43-
44-
// Set scale value to ripple and animate it
45-
$ripple.className = "ripple ripple-on";
46-
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
47-
48-
// This function is called when the animation is finished
49-
setTimeout(function() {
50-
51-
// Let know to other functions that this element has finished the animation
52-
$ripple.dataset.animating = 0;
53-
document.dispatchEvent(rippleEnd);
54-
55-
}, 500);
56-
57-
};
58-
59-
var rippleOut = function($ripple) {
60-
// Clear previous animation
61-
$ripple.className = "ripple ripple-on ripple-out";
62-
63-
// Let ripple fade out (with CSS)
64-
setTimeout(function() {
65-
$ripple.remove();
66-
}, 1000);
67-
};
68-
69-
// Helper, need to know if mouse is up or down
70-
var mouseDown = false;
71-
document.body.onmousedown = function() {
72-
mouseDown = true;
73-
};
74-
document.body.onmouseup = function() {
75-
mouseDown = false;
76-
};
77-
78-
// Append ripple wrapper if not exists already
79-
var rippleInit = function(e, target) {
80-
81-
if (target.getElementsByClassName("ripple-wrapper").length === 0) {
82-
target.className += " withripple";
83-
var $rippleWrapper = document.createElement("div");
84-
$rippleWrapper.className = "ripple-wrapper";
85-
target.appendChild($rippleWrapper);
86-
rippleStart(e, $rippleWrapper);
87-
}
88-
89-
};
90-
91-
// Events handler
92-
// init RippleJS and start ripple effect on mousedown
93-
bind("mousedown", withRipple, rippleInit);
94-
// start ripple effect on mousedown
95-
bind("mousedown", ".ripple-wrapper, .ripple", rippleStart);
96-
// if animation ends and user is not holding mouse then destroy the ripple
97-
bind("rippleEnd", ".ripple-wrapper, .ripple", function(e, $ripple) {
98-
if (!mouseDown) {
99-
rippleOut($ripple);
100-
}
101-
});
102-
// Destroy ripple when mouse is not holded anymore if the ripple still exists
103-
bind("mouseup", ".ripple-wrapper, .ripple", function(e, $ripple) {
104-
if ($ripple.dataset.animating != 1) {
105-
rippleOut($ripple);
106-
}
107-
});
108-
109-
}
3+
init : function(withRipple) {
4+
"use strict";
5+
6+
// animations time
7+
var rippleOutTime = 100,
8+
rippleStartTime = 500;
9+
10+
// Helper to bind events on dynamically created elements
11+
var bind = function(event, selector, callback) {
12+
document.addEventListener(event, function(e) {
13+
var target = (typeof e.detail !== "number") ? e.detail : e.target;
14+
15+
if (target.matches(selector)) {
16+
callback(e, target);
17+
}
18+
});
19+
};
20+
21+
var rippleStart = function(e, target) {
22+
23+
// Init variables
24+
var $rippleWrapper = (target.matches(".ripple-wrapper")) ? target : target.parentNode,
25+
$el = $rippleWrapper.parentNode,
26+
$ripple = document.createElement("div"),
27+
elPos = $el.getBoundingClientRect(),
28+
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
29+
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
30+
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
31+
refreshElementStyle;
32+
33+
// Set ripple class
34+
$ripple.className = "ripple";
35+
36+
// Move ripple to the mouse position
37+
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
38+
39+
// Insert new ripple into ripple wrapper
40+
$rippleWrapper.appendChild($ripple);
41+
42+
// Make sure the ripple has the class applied (ugly hack but it works)
43+
refreshElementStyle = window.getComputedStyle($ripple).opacity;
44+
45+
// Let other funtions know that this element is animating
46+
$ripple.dataset.animating = 1;
47+
48+
// Set scale value to ripple and animate it
49+
$ripple.className = "ripple ripple-on";
50+
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
51+
52+
// This function is called when the animation is finished
53+
setTimeout(function() {
54+
55+
// Let know to other functions that this element has finished the animation
56+
$ripple.dataset.animating = 0;
57+
document.dispatchEvent(rippleEnd);
58+
59+
}, rippleStartTime);
60+
61+
};
62+
63+
var rippleOut = function($ripple) {
64+
// Clear previous animation
65+
$ripple.className = "ripple ripple-on ripple-out";
66+
67+
// Let ripple fade out (with CSS)
68+
setTimeout(function() {
69+
$ripple.remove();
70+
}, rippleOutTime);
71+
};
72+
73+
// Helper, need to know if mouse is up or down
74+
var mouseDown = false;
75+
document.body.onmousedown = function() {
76+
mouseDown = true;
77+
};
78+
document.body.onmouseup = function() {
79+
mouseDown = false;
80+
};
81+
82+
// Append ripple wrapper if not exists already
83+
var rippleInit = function(e, target) {
84+
85+
if (target.getElementsByClassName("ripple-wrapper").length === 0) {
86+
target.className += " withripple";
87+
var $rippleWrapper = document.createElement("div");
88+
$rippleWrapper.className = "ripple-wrapper";
89+
target.appendChild($rippleWrapper);
90+
rippleStart(e, $rippleWrapper);
91+
}
92+
93+
};
94+
95+
// Events handler
96+
// init RippleJS and start ripple effect on mousedown
97+
bind("mousedown", withRipple, rippleInit);
98+
// start ripple effect on mousedown
99+
bind("mousedown", ".ripple-wrapper, .ripple", rippleStart);
100+
// if animation ends and user is not holding mouse then destroy the ripple
101+
bind("rippleEnd", ".ripple-wrapper, .ripple", function(e, $ripple) {
102+
if (!mouseDown) {
103+
rippleOut($ripple);
104+
}
105+
});
106+
// Destroy ripple when mouse is not holded anymore if the ripple still exists
107+
bind("mouseup", ".ripple-wrapper, .ripple", function(e, $ripple) {
108+
if ($ripple.dataset.animating != 1) {
109+
rippleOut($ripple);
110+
}
111+
});
112+
113+
}
110114
};

0 commit comments

Comments
 (0)