Home > JavaScript, Object Pascal, OP4JS, Smart Mobile Studio > Instant CSS3 smoothness

Instant CSS3 smoothness

Here is a fun little one-liner which forces the browser to turn all horizontal movement of a component into a CSS3 transformation. Simply add this one-liner to your component’s InitializeObject() method and enjoy:

procedure TMyControl.InitializeObject;
begin
  inherited;
  w3_setStyle(Handle,w3_CSSPrefix('Transition'), 'left .12s');
end;

What it does is to tell the browser, that all and any changes to the “left” property should be delayed and transitioned to 0.12 seconds. This means that if you do a simple:

FMyControl.left:=100;

Your control (or any control, you can apply this to any TW3MovableObject descendant) will slide from it’s current position – to it’s new position at 100px, within a timeframe of 0.12 seconds. So it will smoothly glide over the screen as opposed to be moved instantly.

Try it out! Make a new visual project, drop a button on the form – and apply the one-liner using the button-handle (W3Button1.handle for instance). Now add an onClick event handler to the button with a self.moveTo(100,100); and see what happens 🙂

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: