A text rendering processing method, device and equipment and storage medium
By finely splitting and dynamically encapsulating browser front-end plain text nodes into hypertext markup element nodes, the problem of mismatch between animation and content generation in front-end rendering solutions is solved, achieving high-quality visual synchronization and a smooth experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- UC MOBILE CHINA CO LTD
- Filing Date
- 2026-04-15
- Publication Date
- 2026-07-21
AI Technical Summary
Existing front-end rendering solutions lack transition animations that match the content generation rhythm in the application of large language models, resulting in user perception of lag, attention fragmentation, and a significant reduction in interaction smoothness and immersion.
By finely splitting the plain text nodes that cannot be animated in the browser front end, dynamically encapsulating them into independent hypertext markup element nodes, and giving incremental text binding transition animation capabilities, visual synchronization between content generation and interface presentation is achieved.
While maintaining the original document structure and style inheritance relationship, it significantly improves the perceived smoothness and immersion of users in the streaming interaction process, providing a natural and smooth progressive rendering experience.
Smart Images
Figure CN122431773A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of front-end data processing technology, and more specifically, to a text rendering processing method, apparatus, device, and storage medium. Background Technology
[0002] In the application of large language models, interactive applications based on streaming output are commonly used. In such applications, the model typically returns generated content step by step in the form of a token stream, and the front end needs to render the returned Markdown-formatted text in real time to achieve low-latency user feedback.
[0003] However, even if existing front-end rendering solutions support incremental parsing, their visual presentation is still a static, abrupt update, lacking transition animations that match the rhythm of content generation. This causes users to experience lag, a break in attention, and significantly reduces the smoothness and immersion of the interaction.
[0004] Although existing technologies have attempted to introduce basic fade-in or typing animation effects during the rendering process, these effects are often decoupled from the semantic structure of Markdown and cannot adaptively adjust the animation strategy according to different element types such as paragraphs, lists, headings, and tables. Summary of the Invention
[0005] According to one aspect of this application, a text rendering method is provided, comprising: obtaining newly added text fragments returned by a preset model in a streaming manner, and extracting the newly added text fragments into multiple preset text components; comparing the text content before and after each of the multiple text components to determine incrementally differentiated text; encapsulating the incrementally differentiated text to generate hypertext markup element nodes corresponding to the incrementally differentiated text; and triggering front-end transition animation rendering based on the hypertext markup element nodes.
[0006] According to some embodiments, obtaining newly added text fragments returned by a preset model in a streaming manner and extracting the newly added text fragments into multiple preset text components includes: determining the content in the newly added text fragments that can perform animation rendering; determining multiple rendering components based on the content in the newly added text fragments that can perform animation rendering, the multiple rendering components including title components, paragraph components, list components and / or table components; and extracting the text content in the multiple rendering components into the corresponding multiple text components, wherein the multiple rendering components correspond one-to-one with the multiple text components.
[0007] According to some embodiments, before obtaining the newly added text fragments returned by the preset model in a streaming manner and extracting the newly added text fragments into multiple preset text components, the existing text content in the multiple text components is obtained.
[0008] According to some embodiments, the text content of multiple text components is compared before and after to determine incrementally differentiated text, including: obtaining the current text content of multiple text components, the current text content containing existing text content; performing a matching query in the current text content to obtain the index position of the existing text content; and extracting the text content after the index position of the existing text content in the current text content as the incrementally differentiated text.
[0009] According to some embodiments, the incrementally differentiated text is encapsulated to generate the corresponding hypertext markup element node, including: storing the incrementally differentiated text into a preset array list; wrapping multiple contents in the preset array list with line content tags; adding a preset transition animation class name to the content corresponding to the incrementally differentiated text wrapped by the line content tags to generate the hypertext markup element node.
[0010] According to some embodiments, triggering the front-end transition animation rendering based on the hypertext markup element node includes: obtaining the original text node corresponding to the newly added text fragment to determine the position of the incrementally differentiated text in the original text node; inserting the hypertext markup element node into the position of the incrementally differentiated text in the original text node, and triggering the transition animation rendering according to the transition animation class name.
[0011] According to some embodiments, after triggering the transition animation rendering of the front end based on the hypertext markup element node, the text paragraph in which the hypertext markup element node that has triggered the transition animation rendering is located is determined; and a second rendering is performed on the text paragraph.
[0012] According to one aspect of this application, a text rendering processing apparatus is provided, comprising: a text extraction module for acquiring newly added text fragments returned by a preset model in a streaming manner, and extracting the newly added text fragments into multiple preset text components; a content comparison module for comparing the text content of the multiple text components before and after, to determine incrementally differentiated text; a text encapsulation module for encapsulating the incrementally differentiated text to generate hypertext markup element nodes corresponding to the incrementally differentiated text; and a rendering module for triggering front-end transition animation rendering based on the hypertext markup element nodes.
[0013] According to one aspect of this application, an electronic device is provided, comprising: one or more processors; a storage device for storing one or more programs; and, when the one or more programs are executed by the one or more processors, causing the one or more processors to perform the method as described above.
[0014] According to one aspect of this application, a computer-readable storage medium is provided that stores a computer program or instructions thereon, which, when executed by a processor, implement the method described above.
[0015] According to embodiments of this application, based on the characteristics of streaming output from a large language model, an incremental rendering mechanism is adopted to extract the different text fragments in each content update in real time. By finely splitting the plain text nodes that are not animated in the browser front end and dynamically encapsulating them into independent hypertext markup element (i.e., HTML element) nodes, the incremental text is given the ability to bind transition animations while maintaining the original document structure and style inheritance relationship. This achieves visual synchronization between content generation and interface presentation, significantly improving the user's perceived smoothness and immersion during the streaming interaction process, and achieving a natural, smooth, and low-interference progressive rendering experience.
[0016] It should be understood that the above general description and the following detailed description are merely exemplary and do not limit this application. Attached Figure Description
[0017] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application.
[0018] Figure 1 A flowchart illustrating a text rendering method according to an example embodiment of this application is shown.
[0019] Figure 2 A schematic diagram of a text rendering processing apparatus according to an example embodiment of this application is shown.
[0020] Figure 3 A schematic diagram of an electronic device according to an example embodiment of this application is shown. Detailed Implementation
[0021] The user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse.
[0022] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, these exemplary embodiments can be implemented in many forms and should not be construed as limited to the embodiments set forth herein; rather, they are provided so that this application will be thorough and complete, and will fully convey the concept of the exemplary embodiments to those skilled in the art. The same reference numerals in the drawings denote the same or similar parts, and therefore repeated descriptions of them will be omitted.
[0023] The described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a full understanding of embodiments of this application. However, those skilled in the art will recognize that the technical solutions of this application can be practiced without one or more of these specific details, or other methods, components, materials, apparatus, or operations may be employed. In these cases, well-known structures, methods, apparatuses, implementations, materials, or operations will not be shown or described in detail.
[0024] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.
[0025] The terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish different objects, not to describe a specific order. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products, or apparatuses.
[0026] This application provides a text rendering processing method, apparatus, device, and storage medium that can collaboratively process streaming Markdown syntax parsing, incremental DOM construction, and semantically aware transition animation scheduling rendering mechanisms to provide users with a high-quality, low-interference visual experience while ensuring the correctness of the text structure.
[0027] The following description, with reference to the accompanying drawings, details a text rendering method, apparatus, device, and storage medium according to embodiments of this application.
[0028] Figure 1 A flowchart illustrating a text rendering method according to an example embodiment of this application is shown.
[0029] like Figure 1 As shown, in step S100, the newly added text fragments returned by the preset model are obtained and extracted into multiple preset text components.
[0030] The rendering processing unit obtains the newly added text fragments returned by the preset model in a streaming manner and determines the content in the newly added text fragments that can be animated.
[0031] According to some embodiments, the preset model is a Large Language Model (LLM), whose generated content is returned to the front end segment by segment in Markdown format. The newly added text fragments obtained by the front end include content that can be animated and content that cannot.
[0032] According to some implementations, content that cannot be animated includes special content such as images, which can be rendered and displayed directly by the front end without animation transition processing.
[0033] Based on the content in the newly added text fragment that can be animated, the rendering processing device determines multiple rendering components.
[0034] According to some embodiments, the rendering processing device performs fine-grained identification of content in the newly added text fragment that can be animated to determine its corresponding multiple rendering components. These multiple rendering components include, but are not limited to, title components, paragraph components, list components, and / or table components.
[0035] The rendering processing unit extracts the text content from multiple rendering components into their respective text components.
[0036] According to some embodiments, multiple text components are pre-set and correspond one-to-one with multiple rendering components. The rendering processing device extracts the text content of each of the multiple rendering components into their corresponding multiple text components.
[0037] In step S200, the text content of multiple text components is compared before and after to determine the incrementally differentiated text.
[0038] Before retrieving new text fragments from the preset model's streaming return, the rendering processing device first retrieves existing text content from multiple text components.
[0039] After obtaining the newly added text fragments returned by the preset model in a streaming manner and extracting them into multiple text components, the rendering processing device obtains the current text content in the multiple text components. The current text content in the multiple text components includes existing text content.
[0040] According to some embodiments, the current text content and existing text content can be compared by incremental append detection.
[0041] The rendering processor performs a matching query on the current text content of the text component to obtain the index position of the existing text content.
[0042] The rendering processor extracts the text content after the index position of the existing text content in the current text content as incremental differential text.
[0043] For example, the existing text content in a certain text component is "A certain company will launch multiple AI hardware products this year," with an index position of "12" within that text component. After obtaining the newly added text fragments returned by the model streaming and extracting them into multiple text components, the current text content in that text component is "A certain company will launch multiple AI hardware products this year." The rendering processing device extracts all content from index position "12" to the end of the current text content, i.e., "will launch multiple AI hardware products," and uses this as incremental differentiated text.
[0044] In step S300, the incrementally differentiated text is encapsulated to generate the hypertext tag element node corresponding to the incrementally differentiated text.
[0045] The rendering processing unit stores the incrementally differentiated text into a predefined array list.
[0046] According to some embodiments, each time the rendering processing device obtains a segment of incrementally differentiated text, it stores it in a preset array list as a content of the list.
[0047] The rendering processor wraps multiple items in a predefined array list with line content tags.
[0048] According to some embodiments, the rendering processing device loops through multiple items in a preset array list and applies a line content container tag to each item. Package it with a label.
[0049] The rendering processor adds a preset transition animation class name to the content corresponding to the incrementally differentiated text wrapped by the line content tag to generate a hypertext markup element node.
[0050] Transition effects refer to the visual effect in a user interface or web page element that smoothly transitions from an initial state to a target state when a certain attribute (such as position, size, color, transparency, etc.) changes, rather than an instantaneous switch. In the embodiments of this application, transition effects can be implemented through classes in CSS (Cascading Style Sheets).
[0051] According to some embodiments, the rendering processing device adds the class name of the CSS transition effect to the content corresponding to the incrementally differentiated text wrapped by the inline content tag, so as to form a separate hypertext markup element node with CSS animation.
[0052] In step S400, the transition animation rendering of the front end is triggered based on the hypertext markup element node.
[0053] The rendering processing unit obtains the original text node corresponding to the newly added text fragment in order to determine the position of the incrementally differentiated text in the original text node.
[0054] The rendering process inserts the hypertext markup element node into the position of the incrementally differentiated text within the original text node, and triggers the transition animation rendering based on the transition animation class name.
[0055] For example, the code for a CSS animation that changes the opacity from 0 to 1 within 300 milliseconds is shown below.
[0056] @keyframes qk-md-show-animation {
[0057] from { opacity: 0; } to { opacity: 1; } When this animation is applied to the content corresponding to the incrementally differentiated text wrapped in a line-content tag, the effect is that the content corresponding to the incrementally differentiated text will be loaded in a gradual manner.
[0058] According to some implementations, the animation rendering for incrementally differentiated text is limited to the original text containing the incrementally differentiated text (such as text in an ordered list, text in an unordered list, paragraph text, and heading text), and has no effect on other text.
[0059] After the transition animation rendering of the front end is triggered based on the hypertext markup element node, the rendering processing device determines the text paragraph where the hypertext markup element node that has triggered the transition animation rendering is located, and performs a second rendering of the text paragraph to prevent abnormalities in the animation rendering of incrementally differentiated text.
[0060] For example, a complete text paragraph, "'The wind howls, the Yi River is cold' comes from the poem 'Song of the Yi River' from the pre-Qin period, also known as 'Song of Jing Ke' or 'Song of Crossing the Yi River.'", might be split into three parts when returned by a preset model: "'The wind howls, the Yi River is cold' comes from the poem 'Song of the Yi River' from the pre-Qin period, 'Song of the Yi River', also known as 'Jing Ke', and 'Song of Crossing the Yi River.'"
[0061] Each incrementally differentiated text section will have transition animation effects added, and these three sections will eventually be connected to form a complete text paragraph.
[0062] However, since the text paragraph is composed of three parts, a certain character may be lost during the splicing process (the actual probability of error is extremely low). To prevent errors in the determination and rendering process of incremental differentiated text from causing errors in the text paragraph, the rendering processing device will perform a rendering without transition animation on the text paragraph composed of these three parts after the rendering of these three parts is completed (and the transition animation is also completed). This ensures the accuracy of the rendering and makes it visually imperceptible to the user that a new rendering has been performed.
[0063] According to the embodiments of this application, pixel-level animation control of streaming incremental text can be achieved without destroying the original document semantic structure and style inheritance relationship, which significantly improves the user's perception of the smoothness of the content generation process and the sense of interactive immersion.
[0064] Figure 2 A schematic diagram of a text rendering processing apparatus according to an example embodiment of this application is shown.
[0065] like Figure 2 As shown, the rendering processing device 100 includes a text extraction module 110, a content comparison module 120, a text encapsulation module 130, and a rendering module 140.
[0066] The text extraction module 110 obtains the newly added text fragments returned by the preset model in a streaming manner, and determines the content in the newly added text fragments that can be animated.
[0067] Based on the content in the newly added text fragment that can be animated, the text extraction module 110 determines multiple rendering components.
[0068] The text extraction module 110 extracts the text content from multiple rendering components into their respective text components.
[0069] Before retrieving new text fragments from the preset model's streaming return, the rendering processing device first retrieves existing text content from multiple text components.
[0070] After obtaining the newly added text fragments returned by the preset model and extracting them into multiple text components, the content comparison module 120 obtains the current text content in the multiple text components. The current text content in the multiple text components includes existing text content.
[0071] The content comparison module 120 performs a matching query on the current text content of the text component to obtain the index position of the existing text content.
[0072] The content comparison module 120 extracts the text content after the index position of the existing text content in the current text content as incremental differentiated text.
[0073] The text encapsulation module 130 stores the incrementally differentiated text into a preset array list.
[0074] The text encapsulation module 130 wraps multiple items in a preset array list using line content container tags.
[0075] The text encapsulation module 130 adds the preset transition animation class name to the content corresponding to the incrementally differentiated text wrapped by the line content container tag, so as to generate a hypertext markup element node.
[0076] The rendering module 140 obtains the original text node corresponding to the newly added text fragment in order to determine the position of the incrementally differentiated text in the original text node.
[0077] The rendering module 140 inserts the hypertext markup element node into the position of the incrementally differentiated text in the original text node, and triggers the transition animation rendering according to the transition animation class name.
[0078] After the transition animation rendering of the front end is triggered based on the hypertext markup element node, the rendering module 140 determines the text paragraph where the hypertext markup element node that has triggered the transition animation rendering is located, and performs a secondary rendering of the text paragraph.
[0079] Figure 3 A schematic diagram of an electronic device according to an example embodiment of this application is shown.
[0080] like Figure 3 As shown, the electronic device 600 is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.
[0081] like Figure 3 As shown, the electronic device 600 is manifested in the form of a general-purpose computing device. The components of the electronic device 600 may include, but are not limited to: at least one processing unit 610, at least one storage unit 620, a bus 630 connecting different system components (including the storage unit 620 and the processing unit 610), a display unit 640, etc. The storage unit stores program code, which can be executed by the processing unit 610, causing the processing unit 610 to perform the methods described in this specification according to the various exemplary embodiments of this application. For example, the processing unit 610 can perform, for example... Figure 1 The method shown.
[0082] Storage unit 620 may include readable media in the form of volatile storage units, such as random access memory (RAM) 6201 and / or cache memory 6202, and may further include read-only memory (ROM) 6203.
[0083] Storage unit 620 may also include a program / utility 6204 having a set (at least one) program module 6205, such program module 6205 including but not limited to: operating system, one or more application programs, other program modules and program data, each or some combination of these examples may include an implementation of a network environment.
[0084] Bus 630 can represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the various bus structures.
[0085] Electronic device 600 can also communicate with one or more external devices 700 (e.g., keyboard, pointing device, Bluetooth device, etc.), and with one or more devices that enable a user to interact with electronic device 600, and / or with any device that enables electronic device 600 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via input / output (I / O) interface 650. Furthermore, electronic device 600 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 660. Network adapter 660 can communicate with other modules of electronic device 600 via bus 630. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.
[0086] Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. The technical solutions according to the embodiments of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, mobile terminal, or network device, etc.) to execute the methods according to the embodiments of this application.
[0087] Software products may employ any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may 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 readable storage media (a non-exhaustive list) include: electrical connections with one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.
[0088] Computer-readable storage media may include data signals propagated in baseband or as part of a carrier wave, carrying readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable storage medium may also be any readable medium other than a readable storage medium that can transmit, propagate, or transfer a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the readable storage medium may be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.
[0089] Program code for performing the operations of this application can be written in any combination of one or more programming languages, including object-oriented programming languages such as Java and C++, and conventional procedural programming languages such as C or similar languages. The program code can execute entirely on the user's computing device, partially on the user's computing device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).
[0090] The aforementioned computer-readable medium carries one or more programs, which, when executed by a device, cause the computer-readable medium to perform the aforementioned functions.
[0091] Those skilled in the art will understand that the above modules can be distributed in the device as described in the embodiments, or they can be modified accordingly and placed in one or more devices that are unique to this embodiment. The modules in the above embodiments can be combined into one module, or they can be further divided into multiple sub-modules.
[0092] The embodiments of this application have been described in detail above. These descriptions are solely for the purpose of helping to understand the method and core ideas of this application. Furthermore, any changes or modifications made by those skilled in the art based on the ideas of this application, its specific implementation methods, and its application scope, are all within the scope of protection of this application. Therefore, the content of this specification should not be construed as a limitation of this application.
Claims
1. A text rendering method, characterized in that, include: Get the newly added text fragments returned by the preset model in a streaming manner, and extract the newly added text fragments into multiple preset text components; The text components are compared before and after to determine the incrementally differentiated text. The incrementally differentiated text is encapsulated to generate the hypertext markup element node corresponding to the incrementally differentiated text; The transition animation rendering on the front end is triggered based on the hypertext markup element node.
2. The method according to claim 1, characterized in that, Obtain newly added text fragments returned by a preset model in a streaming manner, and extract the newly added text fragments into multiple preset text components, including: Identify the content within the newly added text fragment that is capable of undergoing animation rendering; Based on the content in the newly added text fragment that can be animated, multiple rendering components are determined, including title components, paragraph components, list components and / or table components; The text content in the plurality of rendering components is extracted into the corresponding plurality of text components, wherein the plurality of rendering components correspond one-to-one with the plurality of text components.
3. The method according to claim 1, characterized in that, Before obtaining the newly added text fragments returned by the preset model in a streaming manner, and extracting the newly added text fragments into multiple preset text components, the method further includes: Retrieve the existing text content from the multiple text components.
4. The method according to claim 3, characterized in that, The multiple text components are compared before and after to determine the incrementally differentiated text, including: Obtain the current text content from the plurality of text components, wherein the current text content includes the existing text content; Perform a matching query within the current text content to obtain the index position of the existing text content; The text content after the index position of the existing text content is extracted from the current text content to serve as the incremental differentiated text.
5. The method according to claim 1, characterized in that, Encapsulating the incrementally differentiated text to generate the corresponding hypertext markup element node includes: Store the incrementally differentiated text into a preset array list; Multiple items in the preset array list are wrapped by line content container tags; Add the preset transition animation class name to the content corresponding to the incrementally differentiated text that is wrapped by the line content tag to generate the hypertext markup element node.
6. The method according to claim 5, characterized in that, The rendering of the transition animation on the front end is triggered based on the hypertext markup element node, including: Obtain the original text node corresponding to the newly added text fragment to determine the position of the incrementally differentiated text in the original text node; The hypertext markup element node is inserted into the position of the incrementally differentiated text in the original text node, and the transition animation is triggered to render according to the transition animation class name.
7. The method according to claim 1, characterized in that, After triggering the transition animation rendering on the front end based on the hypertext markup element node, the method further includes: Determine the text paragraph containing the hypertext markup element node that has triggered the transition animation rendering; Perform a second rendering on the text paragraph.
8. A text rendering processing apparatus, characterized in that, include: The text extraction module is used to obtain newly added text fragments returned by the preset model in a streaming manner, and extract the newly added text fragments into multiple preset text components; The content comparison module is used to compare the text content of the multiple text components before and after, in order to determine the incrementally differentiated text. A text encapsulation module is used to encapsulate the incrementally differentiated text to generate hypertext markup element nodes corresponding to the incrementally differentiated text. The rendering module is used to trigger the rendering of transition animations on the front end based on the hypertext markup element nodes.
9. An electronic device, characterized in that, include: One or more processors; Storage device for storing 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 method as described in any one of claims 1-8.
10. A computer-readable storage medium having a computer program or instructions stored thereon, characterized in that, When the computer program or instructions are executed by a processor, they implement the method as described in any one of claims 1-8.