Skip to content

Commit 6cbb429

Browse files
author
FezVrasta
committed
added support to browsers that don't support CSS transitions (mdbootstrap#261)
1 parent c8a2602 commit 6cbb429

4 files changed

Lines changed: 98 additions & 24 deletions

File tree

‎dist/js/ripples.js‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,21 @@
22
/* globals jQuery, navigator */
33

44
(function($) {
5+
6+
// Detect if the browser supports transitions
7+
$.support.transition = (function(){
8+
var thisBody = document.body || document.documentElement,
9+
thisStyle = thisBody.style,
10+
support = (
11+
thisStyle.transition !== undefined ||
12+
thisStyle.WebkitTransition !== undefined ||
13+
thisStyle.MozTransition !== undefined ||
14+
thisStyle.MsTransition !== undefined ||
15+
thisStyle.OTransition !== undefined
16+
);
17+
return support;
18+
})();
19+
520
$.ripples = function(options) {
621

722
// Default options
@@ -22,7 +37,15 @@
2237
ripple.off();
2338

2439
// Start the out animation
25-
ripple.addClass("ripple-out");
40+
if ($.support.transition) {
41+
ripple.addClass("ripple-out");
42+
} else {
43+
ripple.animate({
44+
"opacity": 0
45+
}, 100, function() {
46+
ripple.trigger("transitionend");
47+
});
48+
}
2649

2750
// This function is called when the transition "out" ends
2851
ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
@@ -90,17 +113,31 @@
90113
// Set the new size
91114
var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
92115

93-
ripple.css({
94-
"-ms-transform": "scale(" + size + ")",
95-
"-moz-transform": "scale(" + size + ")",
96-
"-webkit-transform": "scale(" + size + ")",
97-
"transform": "scale(" + size + ")"
98-
});
99116

100-
// Start the transition
101-
ripple.addClass("ripple-on");
102-
ripple.data("animating", "on");
103-
ripple.data("mousedown", "on");
117+
// Decide if use CSS transitions or jQuery transitions
118+
if ($.support.transition) {
119+
// Start the transition
120+
ripple.css({
121+
"-ms-transform": "scale(" + size + ")",
122+
"-moz-transform": "scale(" + size + ")",
123+
"-webkit-transform": "scale(" + size + ")",
124+
"transform": "scale(" + size + ")"
125+
});
126+
ripple.addClass("ripple-on");
127+
ripple.data("animating", "on");
128+
ripple.data("mousedown", "on");
129+
} else {
130+
// Start the transition
131+
ripple.animate({
132+
"width": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
133+
"height": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
134+
"margin-left": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
135+
"margin-top": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
136+
"opacity": 0.2
137+
}, 500, function() {
138+
ripple.trigger("transitionend");
139+
});
140+
}
104141

105142
// This function is called when the transition "on" ends
106143
setTimeout(function() {

‎dist/js/ripples.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/ripples.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/ripples.js‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,21 @@
22
/* globals jQuery, navigator */
33

44
(function($) {
5+
6+
// Detect if the browser supports transitions
7+
$.support.transition = (function(){
8+
var thisBody = document.body || document.documentElement,
9+
thisStyle = thisBody.style,
10+
support = (
11+
thisStyle.transition !== undefined ||
12+
thisStyle.WebkitTransition !== undefined ||
13+
thisStyle.MozTransition !== undefined ||
14+
thisStyle.MsTransition !== undefined ||
15+
thisStyle.OTransition !== undefined
16+
);
17+
return support;
18+
})();
19+
520
$.ripples = function(options) {
621

722
// Default options
@@ -22,7 +37,15 @@
2237
ripple.off();
2338

2439
// Start the out animation
25-
ripple.addClass("ripple-out");
40+
if ($.support.transition) {
41+
ripple.addClass("ripple-out");
42+
} else {
43+
ripple.animate({
44+
"opacity": 0
45+
}, 100, function() {
46+
ripple.trigger("transitionend");
47+
});
48+
}
2649

2750
// This function is called when the transition "out" ends
2851
ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
@@ -90,17 +113,31 @@
90113
// Set the new size
91114
var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
92115

93-
ripple.css({
94-
"-ms-transform": "scale(" + size + ")",
95-
"-moz-transform": "scale(" + size + ")",
96-
"-webkit-transform": "scale(" + size + ")",
97-
"transform": "scale(" + size + ")"
98-
});
99116

100-
// Start the transition
101-
ripple.addClass("ripple-on");
102-
ripple.data("animating", "on");
103-
ripple.data("mousedown", "on");
117+
// Decide if use CSS transitions or jQuery transitions
118+
if ($.support.transition) {
119+
// Start the transition
120+
ripple.css({
121+
"-ms-transform": "scale(" + size + ")",
122+
"-moz-transform": "scale(" + size + ")",
123+
"-webkit-transform": "scale(" + size + ")",
124+
"transform": "scale(" + size + ")"
125+
});
126+
ripple.addClass("ripple-on");
127+
ripple.data("animating", "on");
128+
ripple.data("mousedown", "on");
129+
} else {
130+
// Start the transition
131+
ripple.animate({
132+
"width": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
133+
"height": Math.max($(this).outerWidth(), $(this).outerHeight()) * 2,
134+
"margin-left": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
135+
"margin-top": Math.max($(this).outerWidth(), $(this).outerHeight()) * -1,
136+
"opacity": 0.2
137+
}, 500, function() {
138+
ripple.trigger("transitionend");
139+
});
140+
}
104141

105142
// This function is called when the transition "on" ends
106143
setTimeout(function() {

0 commit comments

Comments
 (0)