From Xojo Documentation
|You are currently browsing the old Xojo documentation site. Please visit the new Xojo documentation site!|
New in 2020r1
A WebStyle is a collection of methods and properties that manage the look of a user interface elements in your web app.
A WebStyle can be applied to any object that has a WebStyle property.
You can create WebStyle objects that are subclasses of an existing WebStyle using the SubClass method. A subclass inherits all of the values of the parent object and can then override any of those values.
There are many CSS Selectors that can be animated.
This code in a WebRectangle's Opening event adds a transition that will change the width of the WebRectangle. It then stores the width of the WebRectangle in the style's width property. This is done so that when the transition is triggered later by modifying the width, the width stored in the width property of the WebStyle will match that of the WebRectangle being animated:
Me.Style.Value("width") = Me.Width.ToString + "px"
The transition animation of the width of the WebRectangle is then triggered by changing the width value to a new value:
currentWidth = currentWidth + 600
Rectangle1.Style.Value("width") = currentWidth.ToString + "px"
Because the name ("width" in this case) above passed to both AddTransition and Value is the name of a CSS selector, it must be in lowercase as selector names are case-sensitive.
Because WebStyles use CSS under the hood, there are many CSS properties that can be animated.
Selectors that are dimensions such as width and height are in pixels and thus you must add "px" (lowercase) to the values you pass as in the example above.
Web projects on all supported operating systems.