Animate scrollbar opacity change
Make scrollbars appear/disappear with a short fade effect. For the first
time we will use CSS3 transitions for this. The effect can not (yet) be
themed and may not work in all supported browser versions.
Decrease appear delay to make up for the time the animation
needs. The appear delay could later be handled completele by the
transition effect, since it also supports a delay.
Change-Id: I62a574ff152bed53133bf3c26bd8235acb4a7089
Signed-off-by: Tim Buschtöns <tbuschto@eclipsesource.com>
diff --git a/bundles/org.eclipse.rap.rwt/js/rwt/html/Style.js b/bundles/org.eclipse.rap.rwt/js/rwt/html/Style.js
index 8799f8b..3c3d374 100644
--- a/bundles/org.eclipse.rap.rwt/js/rwt/html/Style.js
+++ b/bundles/org.eclipse.rap.rwt/js/rwt/html/Style.js
@@ -436,6 +436,22 @@
return this.getOwnProperty( target, this._prefixProperty( "userSelect" ) );
},
+ setTransition : function( target, value ) {
+ if( !this._transitionProperty ) {
+ // TODO [tb] : Find a more general solution for transitions and/or style support tests
+ this._transitionProperty = "transition";
+ var dummy = document.createElement( "div" );
+ if( !( "transition" in dummy.style ) ) {
+ if( "MozTransition" in dummy.style ) {
+ this._transitionProperty = "MozTransition";
+ } else if( "webkitTransition" in dummy.style ) {
+ this._transitionProperty = "webkitTransition";
+ }
+ }
+ }
+ this.setStyleProperty( target, this._transitionProperty, value );
+ },
+
setStyleProperty : function( target, property, value ) {
if( target.setStyleProperty ) {
target.setStyleProperty( property, value );
diff --git a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/base/ScrollBar.js b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/base/ScrollBar.js
index 1dc4b7b..ca40bd1 100644
--- a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/base/ScrollBar.js
+++ b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/base/ScrollBar.js
@@ -42,6 +42,12 @@
this._maxButton.setAppearance( "scrollbar-max-button" );
},
+ _applyOpacity : function( value, old ) {
+ this.base( arguments, value, old );
+ // No transition for the very first time opacity is applied (widget creation)
+ rwt.html.Style.setTransition( this, "opacity 250ms" );
+ },
+
//////
// API
diff --git a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/util/ScrollBarsActivator.js b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/util/ScrollBarsActivator.js
index da5524a..a148ea9 100644
--- a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/util/ScrollBarsActivator.js
+++ b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/util/ScrollBarsActivator.js
@@ -15,7 +15,7 @@
rwt.widgets.util.ScrollBarsActivator = function( scrollable ) {
this._scrollable = scrollable;
this._hovered = false;
- this._activateScrollBarsTimer = new rwt.client.Timer( 250 );
+ this._activateScrollBarsTimer = new rwt.client.Timer( 150 );
this._activateScrollBarsTimer.addEventListener( "interval", this._onActivationTimer, this );
this._deactivateScrollBarsTimer = new rwt.client.Timer( 1000 );
this._deactivateScrollBarsTimer.addEventListener( "interval", this._onDeactivationTimer, this );
diff --git a/tests/org.eclipse.rap.rwt.jstest/js/org/eclipse/rwt/test/spec/Style.spec.js b/tests/org.eclipse.rap.rwt.jstest/js/org/eclipse/rwt/test/spec/Style.spec.js
index b732b0f..a5a9ab1 100644
--- a/tests/org.eclipse.rap.rwt.jstest/js/org/eclipse/rwt/test/spec/Style.spec.js
+++ b/tests/org.eclipse.rap.rwt.jstest/js/org/eclipse/rwt/test/spec/Style.spec.js
@@ -359,4 +359,18 @@
} );
+ describe( "setTransition", function() {
+
+ if(!Client.isTrident() || !Client.getVersion() < 10) {
+ it("sets transition with or without vendor prefix", function() {
+ Style.setTransition( element, "opacity 1s");
+
+ var style = element.style;
+ var transition = style.transition || style.webkitTransition || style.MozTransition;
+ expect( transition ).toContain( "opacity 1s" );
+ });
+ }
+
+ });
+
} );
