mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-13 05:07:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added support for ripple effect to IE

Browse Source 
Not sure which versions of IE are now supported, tested successfully in IE11, now I don't use SVG anymore for the ripple effect but just two nested DIV.
This commit is contained in:
Federico Zivolo 2014-08-19 10:11:29 +02:00
parent 911a52cd33
commit e28ec01dc3
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
material.js
View File

@ -3,7 +3,7 @@ $(function (){
var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a"; var withRipple = ".btn:not('.btn-link'), .navbar a, .nav-tabs a";
// Add ripple elements to material buttons // Add ripple elements to material buttons
$(withRipple).append("<svg class=ripple-wrapper><defs></defs><g><ellipse rx=20 ry=20 class=ripple></ellipse></g></svg>"); $(withRipple).append("<div class=ripple-wrapper><div class=ripple></div></div>");
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes
$(".checkbox label input").after("<span class=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>"); $(".checkbox label input").after("<span class=\"bubble\"></span><span class=\"check\"></span><span class=\"box\"></span>");
@ -12,7 +12,7 @@ $(function (){
$(".radio label input").after("<span class=\"bubble\"></span><span class=\"circle\"></span><span class=\"check\"></span>"); $(".radio label input").after("<span class=\"bubble\"></span><span class=\"circle\"></span><span class=\"check\"></span>");
// Add elements for material inputs // Add elements for material inputs
$("input.form-control, textarea.form-control").each( function() { $("input.form-control, textarea.form-control, select.form-control").each( function() {
$(this).wrap("<div class=form-control-wrapper></div>"); $(this).wrap("<div class=form-control-wrapper></div>");
$(this).after("<span class=material-input></span>"); $(this).after("<span class=material-input></span>");
if ($(this).hasClass("floating-label")) { if ($(this).hasClass("floating-label")) {
@ -50,11 +50,17 @@ $(function (){
var relY = e.pageY - parentOffset.top; var relY = e.pageY - parentOffset.top;
// Move ripple to the click position // Move ripple to the click position
$ripple.attr({"cy":relY, "cx": relX}); $ripple.attr({"style": "top: " + relY + "px; left:" + relX + "px"});
// Start the animation // Start the animation
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", true); $rippleWrapper.attr("class", "ripple-wrapper").data("animating", true);
$ripple.attr("class", "ripple ripple-on").css("transform", "scale(" + $rippleWrapper.width() / 20 + ")"); var scaleVal = "scale(" + Math.round($rippleWrapper.width() / 10) + ")";
$ripple.attr("class", "ripple ripple-on").css({
"-ms-transform": scaleVal,
"-moz-transform": scaleVal,
"-webkit-transform": scaleVal,
"transform": scaleVal
});
setTimeout(function() { setTimeout(function() {
$rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd"); $rippleWrapper.attr("class", "ripple-wrapper").data("animating", false).trigger("rippleEnd");
}, 500); }, 500);

14
ripple.less
View File

@ -11,9 +11,13 @@
border-radius: 2px; border-radius: 2px;
} }
.ripple { .ripple {
fill: black; position: absolute;
fill-opacity: 0.05; width: 20px;
stroke: none; height: 20px;
margin-left: -10px;
margin-top: -10px;
border-radius: 100%;
background-color: rgba(0,0,0,0.05);
-webkit-transform: scale(1); -webkit-transform: scale(1);
-ms-transform: scale(1); -ms-transform: scale(1);
transform: scale(1); transform: scale(1);
@ -23,8 +27,10 @@
opacity: 0; opacity: 0;
} }
.ripple.ripple-on { .ripple.ripple-on {
transition: opacity 0.15s ease-in 0s -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; -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; opacity: 1;
} }
.ripple.ripple-out { .ripple.ripple-out {