mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improved animation timing for ripples to more closely match the original

Browse Source
This commit is contained in:
Joel 2014-09-28 14:34:19 -07:00
parent 85c8baf905
commit bc800df47d
3 changed files with 23 additions and 15 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;
}
.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;
}

16
less/ripples.less
View File

@ -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;
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;
}

2
scripts/ripples.js
View File

@ -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) {