A transition animation implementation method and device, terminal equipment and storage medium

Abstract

Embodiments of the present application disclose a transition animation implementation method and device, terminal equipment and medium, the method comprising: triggering a callback function when a preset element change is detected by a listener function; obtaining size data of the preset element through the callback function, and assigning the size data of the preset element to a size attribute in a transition style of an outer element; wherein the preset element is nested in the outer element; and performing a transition animation of the size of the outer element based on the latest data of the size attribute in the transition style. By directly listening to the preset element and triggering the callback function after detecting the change, the size data of the preset element is obtained, which has a greater performance improvement compared to traversing the entire HTML document to find the preset element through the DOM interface after the rendering event occurs, and then obtaining the size data of the preset element. In addition, the transition animation only needs to be bound to the preset element, without the need to bind each rendering event, thereby improving the maintainability and development efficiency of the code.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of page rendering technology, and in particular to a method, apparatus, terminal device and storage medium for implementing transition animation. Background Technology

[0002] Currently, during the browser's rendering of a webpage, if a Document Object Model (DOM) element contains nested child elements, the width and height of that DOM element will gradually expand as the content of its child elements is rendered. The animation that allows the DOM element's width and height to gradually expand is called the element's natural width and height transition animation.

[0003] In existing technologies, the implementation method of transition animation is roughly as follows: after each rendering event, the browser uses the interface provided by the DOM to traverse the entire Hyper Text Markup Language (HTML) document to find the changed child elements and obtain the size data of the rendered child elements; configure the transition animation according to the size data, and execute the configured transition animation.

[0004] In the process of realizing this invention, the inventors discovered that the prior art has at least the following technical problems: the cost of manipulating the DOM in the browser is very high. When the size of an element changes frequently, it is necessary to continuously traverse the entire HTML document to find the changed child elements and obtain the size of the rendered child elements, resulting in poor performance. Furthermore, transition animations need to be bound to rendering events. When the size of an element is affected by hundreds of rendering events (such as click events on the element, mouse hover events, element content change events, etc.), it is necessary to bind transition animations to the methods of all rendering events. This results in a large amount of initial development work for the browser code and makes subsequent changes and maintenance very difficult. Summary of the Invention

[0005] This invention provides a method, apparatus, terminal device, and storage medium for implementing transition animations, which can improve browser performance and enhance the development efficiency, flexibility, and maintainability of browser code.

[0006] In a first aspect, embodiments of the present invention provide a method for implementing transition animation, comprising:

[0007] When the listening function detects a change in a preset element, the callback function corresponding to the listening function is triggered;

[0008] The callback function retrieves the size data of the preset element and assigns it to the size attribute of the transition style of the outer element; wherein the preset element is nested within the outer element.

[0009] Based on the latest data of the size attribute in the transition style, perform a transition animation for the size of the outer element.

[0010] Secondly, embodiments of the present invention provide an apparatus for implementing transition animation, comprising:

[0011] The listening module is used to trigger the callback function corresponding to the listening function when the listening function detects a change in a preset element;

[0012] The callback module is used to obtain the size data of the preset element through the callback function, and assign the size data of the preset element to the size attribute in the transition style of the outer element; wherein the preset element is nested in the outer element;

[0013] The animation execution module is used to execute a transition animation of the size of the outer element based on the latest data of the size attribute in the transition style.

[0014] Thirdly, embodiments of the present invention provide a terminal device, including:

[0015] One or more processors;

[0016] Memory, used to store one or more programs;

[0017] When the one or more programs are executed by the one or more processors, the one or more processors implement the transition animation implementation method as described in any embodiment of the present invention.

[0018] Fourthly, embodiments of the present invention provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the transition animation implementation method as described in any embodiment of the present invention.

[0019] This invention provides a method, apparatus, terminal device, and storage medium for implementing transition animations. When a listening function detects a change in a preset element, a callback function corresponding to the listening function is triggered. The callback function obtains the size data of the preset element and assigns the size data of the preset element to the size attribute in the transition style of the outer element. The preset element is nested within the outer element. Based on the latest data of the size attribute in the transition style, the transition animation of the outer element's size is executed.

[0020] By directly listening to preset elements and triggering a callback function upon detecting a change in the preset element, it is possible to quickly obtain the size data of the preset element when it changes, and then execute the transition animation. Compared to the traditional approach of traversing the entire HTML document through the DOM interface to find the preset element and then obtaining its size data after a rendering event, browser performance is significantly improved.

[0021] Furthermore, upon obtaining the size data of a preset element, the size attribute of the transition style of the outer element can be assigned based on this data, thus binding the transition animation to the preset element. Compared to traditional solutions that bind transition animations to various rendering events, this significantly improves code maintainability and development efficiency, and covers a more comprehensive range of rendering scenarios. Attached Figure Description

[0022] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0023] Figure 1 A flowchart illustrating a transition animation implementation method provided in Embodiment 1 of the present invention is shown;

[0024] Figure 2 The diagram illustrates continuous monitoring in a transition animation implementation method provided in Embodiment 1 of the present invention.

[0025] Figure 3 A flowchart illustrating a transition animation implementation method provided in Embodiment 2 of the present invention is shown;

[0026] Figure 4 A flowchart illustrating a method for implementing a transition animation according to Embodiment 3 of the present invention is shown;

[0027] Figure 5 A flowchart illustrating a method for implementing a transition animation according to Embodiment 4 of the present invention is shown.

[0028] Figure 6 The diagram shows an H5 page interface schematic of a transition animation implementation method provided in Embodiment 4 of the present invention;

[0029] Figure 7 A schematic diagram of a transition animation implementation device provided in Embodiment 5 of the present invention is shown;

[0030] Figure 8A schematic diagram of the hardware structure of a terminal device provided in Embodiment Six of the present invention is shown. Detailed Implementation

[0031] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of this invention. Obviously, the described embodiments are only some embodiments of this invention, not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention. In the following embodiments, each embodiment provides optional features and examples. The various features described in the embodiments can be combined to form multiple optional solutions. Each numbered embodiment should not be regarded as only one technical solution.

[0032] Example 1

[0033] Figure 1 A flowchart illustrating a transition animation implementation method according to Embodiment 1 of the present invention is shown. The transition animation implementation method provided by this embodiment is applicable to situations where natural width and height transition animations of web page elements are achieved. This method can be executed by a transition animation implementation device, which can be implemented in software and / or hardware. For example, the transition animation implementation device can be integrated into a browser and can be installed on terminal devices such as mobile phones and computers along with the browser.

[0034] like Figure 1 As shown, the method for implementing transition animation provided in this embodiment of the invention includes the following steps:

[0035] S110. When the listener function detects a change in a preset element, the callback function corresponding to the listener function is triggered.

[0036] HTML is a markup language used to describe web pages. The primary form of HTML is HTML tags, which typically appear in pairs as start and end tags, such as the start tag "". , and the closing tag " The opening tag, closing tag, and the content between the two tags are called HTML elements.

[0037] When an HTML document (which can be understood as a webpage) is loaded into a browser, the browser parses the HTML elements within the document to build the DOM model. In other words, the browser interprets HTML elements as DOM elements. Because HTML elements in an HTML document form a tree structure, the parsed DOM elements also form a tree structure. The browser can then use this structure to update the DOM tree and render the updated DOM tree onto the browser interface.

[0038] In this embodiment, the preset element and the outer element can be understood as two DOM elements created by the browser, with the preset element nested within the outer element. In the DOM tree, the outer element can be considered the parent node of the preset element.

[0039] The changes to the preset element can include, but are not limited to, changes in the size of the preset element. Furthermore, the size of the preset element can be affected by multiple rendering events (such as click events on the element, mouse hover events, and content change events).

[0040] Browsers can utilize JavaScript's Application Programming Interface (API) to listen for changes to preset elements. JavaScript provides interfaces for listening to these changes, including but not limited to the ResizeObserver API and MutationObserver API. For example, using these interfaces requires instantiating a listener object, which can then use its listener functions (such as the observe method) to monitor the preset elements.

[0041] In this context, the callback function can be considered as the function passed into the constructor when the listener object is instantiated, thus establishing a correspondence between the callback function and the listener function. When a change in the preset element is detected through the listener object's listener function, the callback function can be triggered. This allows the callback function to retrieve the size data of the preset element and assign values ​​to the size attributes in the transition styles of the outer element.

[0042] S120. Obtain the size data of the preset element through the callback function, and assign the size data of the preset element to the size attribute in the transition style of the outer element.

[0043] The callback function, once triggered, can retrieve relevant information for all monitored elements. The required size data can be obtained from this information using attribute identifiers. Furthermore, based on this size data, the transition style of the outer element nested within the preset element can be assigned, ensuring that the outer element's size changes in tandem with the preset element's size.

[0044] Since the width and height attributes of the preset element are obtained through a callback method after a listener, the browser no longer needs to read the element's width and height attributes from the DOM after a rendering event, resulting in a significant performance improvement. Furthermore, after obtaining the size data of the preset element, the size attribute of the transition style of the outer element can be assigned based on this data, thus achieving binding between the transition animation and the preset element. Moreover, the transition animation only needs to be bound to the preset element once to obtain its size data whenever it changes due to various rendering events. Compared to the traditional approach of binding transition animations to each rendering event, this greatly improves code maintainability and development efficiency, and covers a more comprehensive range of rendering scenarios.

[0045] S130. Based on the latest data of the size attribute in the transition style, perform a transition animation for the size of the outer element.

[0046] Cascading Style Sheets (CSS) is a computer language used to style HTML documents. It allows for pixel-level precise control over the layout of elements on a webpage, supports almost all font sizes and styles, and has the ability to edit the styles of webpage objects and models.

[0047] In this embodiment, the transition style can be considered as the transition property style in CSS, and the transition property style can include at least size properties, such as the width property `transition-property:width` and the height property `transition-property:height`. When the size property in the transition style changes, the animation logic can be triggered to transition the size of the outer element to the latest data of the changed size property.

[0048] For example, Figure 2 The diagram illustrates continuous monitoring in a transition animation implementation method provided in Embodiment 1 of the present invention.

[0049] See Figure 2 When the inner preset element's size changes due to any rendering event, the listener function can detect this change. Subsequently, a callback function corresponding to the listener function can be triggered to quickly obtain the preset element's size data and assign values ​​to the size attributes in the outer element's transition style. When the size attributes in the transition style change, animation logic can be triggered to transition the outer element's size to the latest data of the changed size attributes, thus efficiently implementing the outer element's size transition animation. Furthermore, the listener object can continuously monitor preset element size changes caused by any rendering event, thereby enabling more comprehensive coverage of the rendering scene.

[0050] This invention provides a method for implementing transition animations. By directly listening to a preset element and triggering a callback function upon detecting a change in the preset element, the method can quickly obtain the size data of the preset element when it changes, and then execute the transition animation. Compared to the traditional approach of traversing the entire HTML document through the DOM interface to find the preset element after a rendering event occurs, and then obtaining the size data of the preset element, browser performance is significantly improved. Furthermore, when the size data of the preset element is obtained, the size attribute in the transition style of the outer element can be assigned based on the size data of the preset element, thereby achieving binding between the transition animation and the preset element. Compared to the traditional approach of binding the transition animation to each rendering event, this greatly improves code maintainability and development efficiency, and covers a more comprehensive range of rendering scenarios.

[0051] Example 2

[0052] Figure 3 This diagram illustrates a flowchart of a transition animation implementation method according to Embodiment 2 of the present invention. Based on the above embodiments, this embodiment optimizes the specific execution steps of the callback function, enabling the acquisition of preset element size data and the assignment of size attributes in the transition style of outer elements.

[0053] See Figure 3 The method for implementing transition animation provided in this embodiment of the invention includes the following steps:

[0054] S310. When the listener function detects a change in a preset element, the callback function corresponding to the listener function is triggered.

[0055] S320. Through the callback function, return an array of element information corresponding to the element being listened to by the listener function.

[0056] This involves using listener objects' listener functions (such as the `observe` method) to monitor preset elements, as well as at least one other element. When the listener object detects a change in any of the monitored elements, a callback function is triggered.

[0057] When the listener function detects a change in a preset element, the callback function can return an array of element information corresponding to the element being listened to. This array can be represented as `entries`. The returned array can include at least a `contentRect` property and a `target` property. The `contentRect` property can contain the element's size and position information, such as its width, height, top / bottom padding, and left / right padding. The `target` property can be considered the element itself; the individual elements being listened to can be retrieved through the `target` property of the element information array.

[0058] S330. Call the array search method to find the element in the element information array that corresponds to the class name of the preset element, and assign the found preset element to the first variable declared in advance.

[0059] Since the element information array is an array type, array search methods can be called to find relevant information. For example, the search method (find method) of the element information array `entrieds` can be called to find the preset element based on the class name of the preset element in the `target` attribute. A first variable can be declared, for example, represented by `el`. Furthermore, the return value of the `find` method can be assigned to the first variable `el`, thus allowing the information of the preset element to be retrieved by manipulating the first variable `el`.

[0060] The name of the first variable can be represented by other characters besides el, and serves as a restriction on the first variable. Furthermore, the class names and variable names disclosed in any embodiment of this invention are merely illustrative examples and can be considered as not being restrictions on classes and variables.

[0061] S340. Call the content rectangle area property of the first variable to obtain the size data of the preset element.

[0062] The process involves assigning the found preset element to the first variable `el`, and then obtaining the size data of the preset element by retrieving its `contentRect` property. For example, `el.contentRect.width` retrieves the width of the preset element, and `el.contentRect.height` retrieves its height.

[0063] S350. Call the document query selector method to get the outer element based on the class name of the outer element, and assign the obtained outer element to the pre-declared second variable.

[0064] The document query selector method (document.querySelector) allows you to retrieve a pre-created outer element based on its class name. A second variable, such as `main`, can be declared. The retrieved outer element can then be assigned to this second variable, `main`, allowing you to manipulate the variable to obtain information about the outer element.

[0065] S360. Concatenate the size data of the preset element with the pixel unit, and assign the concatenation result to the size attribute in the transition style of the second variable.

[0066] This involves concatenating the size data of a preset element with a pixel unit. For example, you could use `el.contentRect.width+'px'` to concatenate the width of the preset element with the pixel unit `px`, or `el.contentRect.height+'px'` to concatenate the height of the preset element with the pixel unit `px`.

[0067] The size attributes of the transition style of the second variable can include, for example, the width attribute main.style.width and the height attribute main.style.height of the transition style.

[0068] Specifically, you can assign el.contentRect.width + 'px' to main.style.width, and el.contentRect.height + 'px' to main.style.height.

[0069] S370: Based on the latest data of the size attribute in the transition style, perform a transition animation for the size of the outer element.

[0070] When the size property in the transition style changes, the animation logic can be triggered to transition the size of the outer element to the latest data of the changed size property.

[0071] Based on the above embodiments, this invention optimizes the specific execution steps of the callback function, enabling the acquisition of preset element size data and the assignment of size attributes in the transition style of outer elements. Furthermore, this invention and the transition animation implementation method proposed in the above embodiments belong to the same inventive concept. Technical details not described in detail in this embodiment can be found in the above embodiments, and this embodiment has the same beneficial effects as the above embodiments.

[0072] Example 3

[0073] Figure 4 This diagram illustrates a flowchart of a transition animation implementation method according to Embodiment 3 of the present invention. Based on the previous embodiments, this embodiment optimizes the implementation by adding steps for pre-layouting elements, setting element styles, and binding preset elements for listening. These pre-processing steps lay the foundation for the implementation of the transition animation. Furthermore, the constructor function of the element change listener can be used to bind preset elements to listener functions and construct the correspondence between listener functions and callback functions, thereby achieving the binding of the transition animation to preset elements. Furthermore, the presentation effect of the transition animation can be improved by setting richer styles.

[0074] like Figure 4 As shown, the method for implementing transition animation provided in this embodiment of the invention includes the following steps:

[0075] S410. Create an outer element and a preset element nested within the outer element.

[0076] Before listening to the preset element, the browser can pre-create the outer element and the preset element. For example, a block-level div element can be created as the outer element, and the class name of the outer element can be, for example, "main," which is equivalent to the second variable name. Inside the outer element, a div element can be created as the preset element, and the class name of the preset element can be, for example, "item," thus achieving a layout where the preset element is nested within the outer element.

[0077] Furthermore, the preset element and outer element can also be used to create other types of elements, not just div elements, depending on the actual business scenario. For example, when the preset element is a list, it can be created as a ul element.

[0078] S420: Add a transition style to the outer element.

[0079] Transition styles include size properties. A transition style can be added to the outer element (main) by setting the transition style in the inline style of the outer element (main). The transition property style can include at least size properties, such as the width property `transition-property:width` and the height property `transition-property:height`.

[0080] In some optional implementations, if the outer element and the preset element are block-level elements, in addition to adding transition styles to the outer element, the implementation also includes: adding content-based size-adaptive styles to the outer element and the preset element; and / or adding overflow hiding styles to the outer element; and / or adding display effect styles to the outer element.

[0081] Since the block-level element `div` is a line-only (i.e., infinitely wide) block-level element by default, when the outer element `main` and the default element `item` are `div` elements, you can add a content-based adaptive style to the inline styles of both `main` and `item`, specifically the style `display:inline-block`. The `display:inline-block` style allows the element's width and height to automatically adapt to changes in its content (or the content of its child elements).

[0082] Alternatively, you can add an overflow / hidden style to the inline style of the outer element `main`. The `overflow:hidden` style controls how content is truncated (hidden) when its width and height exceed the element's dimensions.

[0083] Alternatively, you can add display style to the inline style of the outer element (main). Display style can include, but is not limited to, border style, so that the outer element can have a more obvious visual effect after rendering, thus improving the visual interaction experience.

[0084] S430. Bind the preset element to the listener function, and construct the correspondence between the listener function and the callback function.

[0085] When listening to changes in preset elements using JavaScript APIs such as the ResizeObserver API and MutationObserver API, a listener object needs to be instantiated. The listener object's listener function (e.g., the `observe` method) allows you to monitor the preset elements, thus binding the preset elements to the listener function. Furthermore, when instantiating the listener object through the constructor, a callback function can be passed into the constructor to establish a correspondence between the callback function and the listener function.

[0086] In some optional implementations, the preset elements are bound to the listener functions, and the correspondence between the listener functions and callback functions is constructed. This includes: obtaining the element based on the class name of the preset element using a document query selector method, and assigning the obtained preset element to a pre-declared third variable; instantiating the constructor of the element change listener and passing the defined callback function as the parameter of the constructor; assigning the return value of the instantiated constructor to a pre-declared fourth variable; and calling the listener function of the fourth variable, passing the third variable as the parameter of the listener function.

[0087] The document query selector method (document.querySelector) allows you to retrieve pre-created elements based on their class name (item). A third variable can be declared, which can also be represented by `item`. The retrieved element can be assigned to the third variable `item`, allowing you to manipulate the variable to obtain information about the element.

[0088] Instantiating a listener object requires a constructor, which can be, for example, a `ResizeObserver` function or a `MutationObserver` function. The constructor can be called using the `new` keyword, and a predefined callback function can be passed as a parameter. The return value of the constructor can be considered a listener object. This returned listener object can be assigned to a pre-declared fourth variable, such as `ro`. Then, the listener function of the fourth variable `ro` can be called to listen for predefined elements.

[0089] For example, the statement `ro = new ResizeObserver(entries => {})` assigns the return value of the instantiated constructor to a pre-declared fourth variable. Here, `ro` represents the fourth variable; `new` calls the constructor `ResizeObserver()`; `entries` is the function parameter, representing an array of element information; and the `{}` contains the specific logic of the callback function. Furthermore, the statement `ro.observe(item)` binds the listener function `observe` to the preset element `item`. Through these operations, the listener function can monitor the preset element, and when the listener function detects a change in the preset element, the corresponding callback function is triggered.

[0090] S440. When the listener function detects a change in a preset element, the callback function corresponding to the listener function is triggered.

[0091] S450. Obtain the size data of the preset element through the callback function, and assign the size data of the preset element to the size attribute in the transition style of the outer element.

[0092] S460: Based on the latest data of the size attribute in the transition style, perform a transition animation for the size of the outer element.

[0093] This invention provides a method for implementing transition animations, which optimizes the process by adding steps for pre-layouting elements, setting element styles, and binding preset elements for listening. These pre-processing steps lay the foundation for the implementation of the transition animations. Furthermore, the constructor function of element change listeners can be used to bind preset elements to listener functions and establish a correspondence between listener functions and callback functions, thereby achieving the binding of the transition animations to preset elements. Furthermore, the presentation effect of the transition animations can be improved by setting richer styles.

[0094] Furthermore, the implementation method of transition animation proposed in this embodiment and the above embodiment belong to the same inventive concept. Technical details not described in detail in this embodiment can be found in the above embodiment, and this embodiment has the same beneficial effects as the above embodiment.

[0095] Example 4

[0096] Figure 5 This document illustrates a flowchart of a transition animation implementation method according to Embodiment 4 of the present invention. Based on the previous embodiments, this embodiment provides an example of the application scenarios for the transition animation implementation method. For instance, it can be applied during the rendering process of an H5 page application, enabling the execution of a transition animation for the size of the outer element based on the latest data of the size attribute and the duration attribute data in the transition style. By using the transition animation method built into the H5 page, the implementation efficiency of the transition animation is improved.

[0097] Furthermore, examples of specific applications of H5 pages were given, demonstrating how transition animations of outer elements can be executed when the question type is rendered on the answer page, achieving a natural size transition of outer elements based on different question content.

[0098] See Figure 5 The transition animation implementation method provided in this embodiment of the invention can be applied to H5 page rendering, and when the H5 page is a question-and-answer page, it can include the following steps:

[0099] S510: Receive the answer page code sent by the server, and obtain the rendering method corresponding to the question type field based on the question type field in the answer page code.

[0100] In this embodiment, the quiz page can be applied to various scenarios, such as user health assessments, product usage feedback, and psychological tests.

[0101] H5, which can be considered HTML5.0, refers to a language description method for building web content. Browsers can request H5-type answer page code from the server and write this code into pre-created preset elements to render the questions onto the browser interface.

[0102] The answer page can include different question types, such as multiple choice and fill-in-the-blank questions. Furthermore, the browser can pre-define different rendering methods for different question types. When the browser receives the answer page code, it can determine the necessary rendering method based on the question type field to render the question.

[0103] S520. Render the answer page based on the rendering method and assign the rendering result to the internal string property of the preset element to trigger the listener function to listen for changes in the preset element.

[0104] By assigning the obtained preset element to the third variable `item`, information about the preset element can be obtained by manipulating the third variable. The rendered output can be an HTML string, which can be assigned to the inner HTML property of the third variable to cause the browser to reflow the answer page and write the questions into the browser, thus triggering the listener function to detect changes in the preset element.

[0105] S530. When the listener function detects a change in a preset element, the callback function corresponding to the listener function is triggered.

[0106] S540. Obtain the size data of the preset element through the callback function, and assign the size data of the preset element to the size attribute in the transition style of the outer element.

[0107] In this context, the preset element is nested within the outer element.

[0108] S550: Based on the latest data of the size attribute in the transition style and the data of the duration attribute in the transition style, perform a transition animation of the outer element's size.

[0109] When a browser adds a transition style to an outer element, it can also add a transition-duration property style, which defines the duration of the transition animation. For example, transition-duration: 1000 indicates that the transition animation will take 1000 milliseconds to complete.

[0110] One way to improve the efficiency of transition animations is to use browser-defined transition styles. Alternatively, when the browser does not support these styles, transition animations can be implemented using custom timers in JavaScript code.

[0111] For example, Figure 6 The diagram shows an H5 page interface schematic of a transition animation implementation method provided in Embodiment 4 of the present invention.

[0112] See Figure 6 The H5 page can be a mobile H5 single-page application. This application can be a health assessment application, and it can be implemented by users answering questions to achieve health assessment for users.

[0113] This assessment page can render various question types, such as multiple choice, fill-in-the-blank, date-based, and slider questions. Since each question type has different content, its displayed width and height on the page will vary. For example, a multiple choice question might contain at least one option, while a fill-in-the-blank question might include a row of input controls. Therefore, the browser needs to render the natural width and height of the question's outline based on the question type's content.

[0114] When a user opens the quiz page, the program sends a request to the server to obtain the current assessment questions. Upon receiving the quiz page code from the server, it retrieves the rendering method corresponding to the question type field in the quiz page code. Based on the rendering method, the program renders the quiz page and assigns the rendering result to the internal string attribute of a preset element to trigger a listener function to detect changes in the preset element. A callback function is then triggered to obtain the size data of the preset element and assign values ​​to the size attribute in the transition style of the outer element. Finally, a transition animation based on the natural width and height after the question type rendering is executed.

[0115] Figure 6 In the diagram, (a) and (b) represent the interfaces of two questions rendered sequentially. The bold solid lines represent the size of the outer element, while the dashed lines represent the size of a preset element. In (a), the question content is shorter, resulting in a smaller rendered outer element. After the user answers the question in (a), the browser can request the question in (b). Since the question content in (b) is longer, the length of the outer element needs to be increased. Using the transition animation method provided by this invention, a transition animation can be implemented for the portion h of the outer element represented by the double arrows that needs to be increased.

[0116] In addition, see Figure 6 The answer page can also display controls such as the answer progress to enhance the answering experience. Other UI controls, such as the answer time control, can also be rendered on the answer page, but these will not be listed exhaustively here.

[0117] Based on the above embodiments, this invention provides examples of application scenarios for the transition animation implementation method. It enables the execution of transition animations for outer elements during the rendering process of an H5 page application, leveraging the built-in transition animation method of the H5 page, thus improving the efficiency of transition animation implementation. Furthermore, it provides specific examples of H5 page applications, demonstrating the ability to execute transition animations for outer elements during the rendering of question types on a quiz page, achieving a natural size transition of outer elements based on different question content. Moreover, this invention's implementation method for transition animations belongs to the same inventive concept as the above embodiments. Technical details not described in detail in this embodiment can be found in the above embodiments, and this embodiment has the same beneficial effects as the above embodiments.

[0118] Example 5

[0119] Figure 7 This diagram illustrates a structural schematic of a transition animation implementation device according to Embodiment 5 of the present invention. This embodiment of the invention is applicable to situations where transition animations of the natural width and height of web page elements are implemented. The transition animation implementation device provided by this invention can realize the transition animation implementation method provided in the above embodiments.

[0120] like Figure 7 As shown, the apparatus for implementing transition animation in this embodiment of the invention includes:

[0121] The listening module 710 is used to trigger the callback function corresponding to the listening function when the listening function detects a change in the preset element.

[0122] Callback module 720 is used to obtain the size data of a preset element through a callback function and assign the size data of the preset element to the size property in the transition style of the outer element; wherein, the preset element is nested in the outer element;

[0123] Animation execution module 730 is used to perform a transition animation of the outer element's size based on the latest data of the size property in the transition style.

[0124] In some alternative implementations, the callback module includes:

[0125] The array return unit is used to return an array of element information corresponding to the element being monitored by the monitored function;

[0126] The preset element lookup unit is used to call the array lookup method to find the element corresponding to the class name of the preset element from the element information array, and assign the found preset element to the first variable declared in advance;

[0127] The attribute retrieval unit is used to call the content rectangle area attribute of the first variable to obtain the size data of the preset element;

[0128] The outer element retrieval unit is used to call the document query selector method, retrieve the outer element based on its class name, and assign the retrieved outer element to a pre-declared second variable;

[0129] The assignment unit is used to concatenate the size data of the preset element with pixel units and assign the concatenation result to the size attribute in the transition style of the second variable.

[0130] In some alternative implementations, the means for implementing transition animations also includes:

[0131] The layout module is used to create the outer element and the preset elements nested within the outer element before listening for element changes via listener functions;

[0132] The style addition module is used to add transition styles to outer elements; these transition styles include size properties.

[0133] The binding listener module is used to bind preset elements to listener functions and to construct the correspondence between listener functions and callback functions.

[0134] In some optional implementations, a listener module is bound to: retrieve elements based on the class name of preset elements using a document query selector method, and assign the retrieved preset elements to a pre-declared third variable; instantiate the constructor of the element change listener, and pass the defined callback function as the parameter of the constructor; assign the return value of the instantiated constructor to a pre-declared fourth variable; and call the listener function of the fourth variable, passing the third variable as the parameter of the listener function.

[0135] In some optional implementations, if the outer element and the preset element are block-level elements, the style addition module, in addition to adding transition styles to the outer element, is also used to add content-based size-adaptive styles to the outer element and the preset element; and / or, to add overflow hiding styles to the outer element; and / or, to add display effect styles to the outer element.

[0136] In some optional implementations, the transition animation implementation device is applied to H5 page rendering; correspondingly, the animation execution module is specifically used to execute the transition animation of the outer element's size based on the latest data of the size attribute in the transition style and the data of the duration attribute in the transition style.

[0137] In some optional implementations, if the H5 page is a question-and-answer page, the transition animation implementation mechanism may also include:

[0138] The code receiving module is used to receive the answer page code sent by the server before listening for changes in preset elements through the listener function, and to obtain the rendering method corresponding to the question type field based on the question type field in the answer page code;

[0139] The rendering module is used to render the answer page based on the rendering method and assign the rendering result to the internal string property of the preset element so as to trigger the listener function to listen for changes in the preset element.

[0140] The transition animation implementation apparatus provided in this embodiment of the invention belongs to the same inventive concept as the transition animation implementation method provided in the above embodiments. Technical details not described in detail in this embodiment of the invention can be found in the above embodiments, and this embodiment of the invention has the same beneficial effects as the above embodiments.

[0141] Example 6

[0142] Figure 8 The diagram illustrates the hardware structure of a terminal device according to Embodiment Six of the present invention. The terminal device in this embodiment may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), and in-vehicle terminals (e.g., in-vehicle navigation terminals), as well as fixed terminals such as digital TVs and desktop computers. Figure 8 The terminal device shown is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of the present invention.

[0143] like Figure 8 As shown, the terminal device 800 may include a processing unit (e.g., a central processing unit, a graphics processing unit, etc.) 801, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 802 or a program loaded from a storage device 808 into a random access memory (RAM) 803. The RAM 803 also stores various programs and data required for the operation of the terminal device 800. The processing unit 801, ROM 802, and RAM 803 are interconnected via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

[0144] Typically, the following devices can be connected to I / O interface 805: input devices 806 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 807 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 808 including, for example, magnetic tapes, hard disks, etc.; and communication devices 809. Communication device 809 allows terminal device 800 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 8 A terminal device 800 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0145] In particular, according to embodiments of the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of the present invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 809, or installed from a storage device 808, or installed from a ROM 802. When the computer program is executed by the processing device 801, it performs the functions defined in the transition animation implementation method provided by embodiments of the present invention.

[0146] The terminal provided in this embodiment of the invention and the transition animation implementation method provided in the above embodiments belong to the same inventive concept. Technical details not described in detail in this embodiment of the invention can be found in the above embodiments, and this embodiment of the invention has the same beneficial effects as the above embodiments.

[0147] Example 7

[0148] This invention provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the transition animation method provided in the above embodiments.

[0149] It should be noted that the computer-readable storage medium described in the embodiments of the present invention can be a computer-readable signal medium, a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), or flash memory (FLASH), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In the embodiments of the present invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the embodiments of the present invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, wherein computer-readable program code is carried. The transmitted data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0150] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0151] The aforementioned computer-readable storage medium may be included in the aforementioned terminal device, or it may exist independently and not assembled into the terminal device.

[0152] The aforementioned terminal device stores one or more programs. When the terminal device executes one or more of these programs, it causes the terminal device to:

[0153] When the listener function detects a change in the preset element, it triggers the callback function corresponding to the listener function. The callback function retrieves the size data of the preset element and assigns the size data of the preset element to the size property in the transition style of the outer element. The preset element is nested within the outer element. Based on the latest data of the size property in the transition style, the outer element's size transition animation is executed.

[0154] Computer program code for performing the operations of this invention can be written in one or more programming languages ​​or a combination thereof. These programming languages ​​include object-oriented programming languages—such as JAVA, Smalltalk, and C++—and conventional procedural programming languages—such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0155] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functionalities indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functionality involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0156] The units described in the embodiments of the present invention can be implemented in software or hardware. The names of the units are not, in some cases, intended to limit the specific unit.

[0157] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary hardware logic components that can be used include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.

[0158] Note that the above description is merely a preferred embodiment of the present invention and the technical principles employed. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions can be made without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of the present invention, the scope of which is determined by the scope of the appended claims.

Claims

1. A method for implementing transition animation, characterized in that, include: When the listening function detects a change in a preset element, a callback function corresponding to the listening function is triggered; wherein, the change in the preset element includes: a change in the element size of the preset element; The callback function retrieves the size data of the preset element and assigns it to the size attribute of the transition style of the outer element; wherein the preset element is nested within the outer element. Based on the latest data of the size attribute in the transition style, execute the transition animation of the size of the outer element so that the size of the outer element follows the transition change of the preset element; Before listening for element changes via listener functions, the following is also included: Create an outer element and a preset element nested within the outer element; Add a transition style to the outer element; wherein the transition style includes a size attribute; Bind the preset element to the listener function, and construct the correspondence between the listener function and the callback function; The step of binding the preset element to the listener function and constructing the correspondence between the listener function and the callback function includes: The document query selector method retrieves elements based on the class name of the preset elements and assigns the retrieved preset elements to a pre-declared third variable. Instantiate the constructor for element change listeners, and pass the defined callback function as a parameter to the constructor; The return value of the instantiated constructor is assigned to the pre-declared fourth variable; Call the listener function of the fourth variable, using the third variable as the parameter of the listener function.

2. The method according to claim 1, characterized in that, The step of obtaining the size data of the preset element and assigning the size data of the preset element to the size attribute of the transition style of the outer element includes: Returns an array of element information corresponding to the elements being monitored by the monitoring function; Call the array lookup method to find the element corresponding to the class name of the preset element from the element information array, and assign the found preset element to the pre-declared first variable; Call the content rectangle region attribute of the first variable to obtain the size data of the preset element; Call the document query selector method to get the outer element based on the class name of the outer element, and assign the obtained outer element to a pre-declared second variable; The size data of the preset element is concatenated with the pixel unit, and the concatenation result is assigned to the size attribute in the transition style of the second variable.

3. The method according to claim 1, characterized in that, If the outer element and the preset element are block-level elements, then in addition to adding transition styles to the outer element, the following is also included: Add content-based size-adaptive styles to the outer element and the preset element; and / or, Add an overflow hiding style to the outer element; and / or, Add display style effects to the outer element.

4. The method according to claim 1, characterized in that, Applied to H5 page rendering; correspondingly, the step of performing a transition animation of the outer element's size based on the latest data of the size attribute in the transition style includes: Based on the latest data of the size attribute in the transition style and the data of the duration attribute in the transition style, perform a transition animation of the size of the outer element.

5. The method according to claim 4, characterized in that, If the H5 page is a question-answering page, then before listening for changes in preset elements through the listener function, the following steps are also included: Receive the answer page code sent by the server, and obtain the rendering method corresponding to the question type field according to the question type field in the answer page code; The answer page is rendered using the rendering method described above, and the rendering result is assigned to the internal string attribute of a preset element to trigger a listener function to detect changes in the preset element.

6. A device for implementing transition animation, characterized in that, include: The listening module is used to trigger a callback function corresponding to the listening function when the listening function detects a change in the preset element; wherein, the change in the preset element includes: a change in the size of the preset element; The callback module is used to obtain the size data of the preset element through the callback function, and assign the size data of the preset element to the size attribute in the transition style of the outer element; wherein the preset element is nested in the outer element; An animation execution module is used to execute a transition animation of the size of the outer element based on the latest data of the size attribute in the transition style, so that the size of the outer element follows the transition change of the preset element; The apparatus for implementing the transition animation further includes: The layout module is used to create an outer element and a preset element nested within the outer element before listening for element changes via a listener function. A style addition module is used to add transition styles to the outer element; wherein the transition styles include size attributes; A binding listener module is used to bind the preset element to the listener function and to construct the correspondence between the listener function and the callback function; Specifically, the binding listener module is used to: obtain elements based on the class name of preset elements using a document query selector method, and assign the obtained preset elements to a pre-declared third variable; instantiate the constructor of the element change listener, and use the defined callback function as the parameter of the constructor; assign the return value of the instantiated constructor to a pre-declared fourth variable; and call the listener function of the fourth variable, using the third variable as the parameter of the listener function.

7. A terminal device, characterized in that, The terminal includes: One or more processors; Memory, used to store one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the transition animation implementation method as described in any one of claims 1-5.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the transition animation method as described in any one of claims 1-5.

Images