DECLARATIVE SHOW AND HIDE ANIMATIONS IN HTML5

• US 20130346851A1
• Filed: 06/25/2012
• Published: 12/26/2013
• Est. Priority Date: 06/25/2012
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Corporation
• Inventors: Leece, Mark
• Granted Patent: US 9,892,205 B2
• Time in Patent Office: Days
• US Class Current: 715/235
• CPC Class Codes: G06F 16/9577 Optimising the visualization of content, e.g. distillation of HTML documents

Abstract

An arrangement for enabling declarative show and hide animations in web-based applications is provided in which expando attributes associated with HTML elements are utilized to define CSS level 3 (“C553”) animations that are executed when an element is shown or hidden. A set of utility functions, which wrap standard DOM (Document Object Model) element methods supported in JavaScript, are employed to show, hide, add, and remove elements from the DOM tree and invoke an algorithm when used. The algorithm traverses the DOM tree for HTML elements that have the show and hide expando attributes and automatically executes the associated animations.

Claims

1. A method for implementing Cascading Style Sheet (“

CSS”

) animations in-line in Hypertext Markup Language (“

HTML”

) markup, the method comprising the steps of;

loading an HTML markup in which the CSS animations are defined in-line using show and hide animation attributes associated with HTML elements;

parsing the HTML markup to generate a Document Object Model (“

DOM”

) tree;

utilizing a set of utility functions that wrap Javascript DOM element methods, the utility functions, when utilized, invoking a show and hide animation algorithm;

traversing the DOM tree using the show and hide animation algorithm to locate HTML elements having the show or hide animation attributes; and

executing the defined CSS animations associated with the located HTML elements.

2. The method of claim 1 in which the HTML is HTML revision 5 (“

HTML5”

) and the CSS animations are CSS level 3 (“

C553”

) animations.

3. The method of claim 2 in which the show and hide attributes are expando attributes.

4. The method of claim 3 in which an expando attribute value contains a space/comma separate list of class names using a single CSS class-name to encapsulate the CSS3 animation name/properties or CSS3 transition names/properties.

5. The method of claim 1 in which the Javascript DOM element methods include one or more of showElement(element), hideElement(element), appendChild(parent, child), insertBefore(parent, newChild, refChild), removeChild(parent, child), and replaceChild(parent, newChild, oldChild).

6. The method of claim 1 in which the show and hide animation algorithm takes a DOM element and returns a promise that is completed when a last animation is completed.

7. The method of claim 2 in which, when showing animations, the show and hide animation algorithm removes any existing hide animation classes so that all associated CSS3 show animations and transition names are removed before applying any show animation classes.

8. The method of claim 1 in which, when hiding animations, the show and hide animation algorithm removes any existing show animation classes so that all associated CSS3 animations and transition names are removed before applying any hide animation classes.

9. One or more computer-readable storage media, not consisting of a propagated signal, storing instructions which, when executed by one or more processors disposed in an electronic device, perform a method for enabling specification of CSS level 3 (“

CSS3”

) animations within a HyperText Markup Language revision 5 (“

HTML5”

) document, the method comprising the steps of;

receiving the HTML5 document at a local server, the document including CSS3 animations defined in-line using show and hide animation expando attributes associated with particular ones of HTML elements;

sending a set of utility functions to a remote client, the set of utility functions wrapping standard Javascript DOM (Document Object Model) element methods, the utility functions, when utilized on a client browser at runtime, invoking a show and hide animation algorithm; and

sending the HTML5 document to the remote client device for parsing into a DOM tree at runtime, the show and hide animation algorithm being configured for querying the DOM tree to locate HTML elements having the show or hide animation expando attributes and executing the defined CSS3 animations associated with the located HTML elements.

10. The one or more computer-readable storage media of claim 9 in which the show and hide animation algorithm is further configured for adding a CSS class-name to an HTML element and all descendent elements if the HTML element is visible and includes CSS class-names in an associated show animation expando attribute.

11. The one or more computer-readable storage media of claim 9 in which the show and hide animation algorithm is further configured for adding a CSS class-name to an HTML element and all descendent elements if the HTML element is hidden and includes CSS class-names in an associated hide animation expando attribute.

12. The one or more computer-readable storage media of claim 9 in which the show and hide animation algorithm is further configured for creating a CSS3 animation-names map and attaching an animation-end listener to an HTML element, the animation-end listener being arranged to remove a CSS3 animation-name from the CSS3 animation-names map.

13. The one or more computer-readable storage media of claim 9 in which the show and hide animation algorithm is further configured for creating a CSS3 transition-names map and attaching a transition-end listener to an HTML element, the transition-end listener being arranged to remove a CSS3 transition-name from the CSS3 transition-names map.

14. The one or more computer-readable storage media of claim 9 in which the remote client device comprises one of mobile phone, e-mail appliance, smart phone, non-smart phone, PDA, PC, notebook PC, laptop PC, ultra-mobile PC, tablet device, tablet PC, handheld game device, game console, digital media player, digital camera, GPS navigation device, Internet-connect television, set-top box, or device which combines one or more features thereof

15. A system for automatically executing CSS level 3 (“

CSS3”

) animations from in-line HyperText Markup Language (“

HTML”

) markup, the system comprising;

one or more computer-readable storage media; and

a processor responsive to the computer-readable storage media and to a computer program, the computer program, when loaded into the processor, operable for

i) exposing an interface to a user to enable the user to specify CSS3 animations in-line with the HTML markup using show and hide animation attributes associated with HTML elements,

ii) generating a client-side executable HTML file including the specified in-line CSS3 animations,

iii) generating JavaScript to implement a set of utility functions that wrap Javascript Document Object Model (“

DOM”

) element methods, the utility functions, when utilized at a client device, invoking a show and hide animation algorithm, the show and hide animation algorithm walking a DOM tree generated from the HTML file, when parsed, to locate HTML elements having associated show or hide animation attributes and executing the user-specified CSS3 animations at the client device.

16. The system of claim 15 in which the user is a web application designer or developer.

17. The system of claim 15 in which the user-specified CSS3 animations are automatically executed by the show and hide animation algorithm when an HTML element is shown or hidden.

18. The system of claim 15 in which the HTML file conforms with HTML5.

19. The system of claim 15 in which the show and hide animations are defined in the HTML markup using associated expando attributes.

20. The system of claim 19 in which values of the expando attributes include CSS class-names.