Permalink
Browse files

Property-specific transition in slider fixes the weird flicker.

  • Loading branch information...
1 parent 78a9b30 commit 745f50e2625d36d0c215aa9d874e4b6ad5841c2b @joseph joseph committed Oct 9, 2011
Showing with 22 additions and 8 deletions.
  1. +15 −0 src/core/styles.js
  2. +7 −8 src/flippers/slider.js
View
@@ -57,6 +57,21 @@ Monocle.Styles = {
}
s.MozTransform = s.OTransform = s.transform = "translateY("+y+")";
return y;
+ },
+
+
+ transitionFor: function (elem, prop, duration, timing, delay) {
+ var tProps = Monocle.Browser.css.toDOMProps('transition');
+ var pProps = Monocle.Browser.css.toCSSProps(prop);
+ timing = timing || "linear";
+ delay = (delay || 0)+"ms";
+ for (var i = 0, ii = tProps.length; i < ii; ++i) {
+ var t = "none";
+ if (duration) {
+ t = [pProps[i], duration+"ms", timing, delay].join(" ");
+ }
+ elem.style[tProps[i]] = t;
+ }
}
}
@@ -364,14 +364,13 @@ Monocle.Flippers.Slider = function (reader) {
}
if (Monocle.Browser.env.supportsTransition) {
- if (duration) {
- transition = duration + "ms";
- transition += ' ' + (options.timing || 'linear');
- transition += ' ' + (options.delay || 0) + 'ms';
- } else {
- transition = "none";
- }
- Monocle.Styles.affix(elem, 'transition', transition);
+ Monocle.Styles.transitionFor(
+ elem,
+ 'transform',
+ duration,
+ options.timing,
+ options.delay
+ );
if (Monocle.Browser.env.supportsTransform3d) {
Monocle.Styles.affix(elem, 'transform', 'translate3d('+x+'px,0,0)');

0 comments on commit 745f50e

Please sign in to comment.