Declarative Show Hide Animations in HTML Markup
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Animations in HTML5 and CSS3, executed when an element is shown or hidden, typically require coding in JavaScript, making it difficult for designers to create web-based experiences without involving software developers.
Innovation Solution
Utilizing expando attributes in HTML elements to define CSS level 3 animations, with utility functions in JavaScript that automatically execute these animations when elements are shown or hidden, allowing designers to specify animations directly in HTML markup.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of manufacture
If JavaScript coding is used to execute animations when elements are shown or hidden, then animation functionality is achieved, but the complexity of the solution increases and requires software developer involvement
Solution Approach 1:
The patent extracts the animation declaration from JavaScript code and places it directly in HTML markup using expando attributes. This separates the animation definition (declarative) from the animation execution (imperative), allowing designers to specify animations in HTML without requiring JavaScript coding knowledge.
Solution Approach 2:
The patent introduces utility functions as an intermediary layer between HTML markup and CSS3 animations. These utility functions wrap standard DOM element methods and automatically detect expando attributes in HTML, triggering the appropriate animations without requiring direct JavaScript coding from designers.
2Ease of operation
If designers can specify animations directly in HTML markup, then the ease of creating web-based experiences improves, but the complexity of the HTML specification increases
Solution Approach 1:
The patent leverages the universal expando attribute mechanism in HTML, which is already a standard feature supporting custom attributes. By using this existing universal mechanism, the patent adds animation specification capability without fundamentally changing or complicating the HTML specification, as expando attributes are already widely supported.
3Extent of automation
If utility functions wrap standard DOM element methods, then automation of animation execution is achieved, but the complexity of the JavaScript implementation increases
Solution Approach 1:
The utility functions are designed to automatically detect and process expando attributes in HTML markup without requiring manual configuration or complex logic. The system self-services by traversing the DOM tree, identifying elements with expando attributes, and automatically executing the corresponding animations, reducing the need for complex JavaScript implementation.
Data Source
AI summary
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.