Popup animation component configuration method and display method

Abstract

The embodiment of the application discloses a pop-up layer animation component configuration method, which comprises the following steps: configuring a target component, wherein the target component comprises a plurality of animation codes for realizing a plurality of animation effects; configuring a parameter entry for the target component, wherein the parameter entry is used for receiving an animation type parameter representing an animation type, and the target component is instantiated according to the parameter entry to obtain a target component instance, and the target component instance is used for controlling a target pop-up layer to execute a target animation effect corresponding to the animation type parameter. The embodiment of the application can ensure diversified and efficient customization of the interactive form of the pop-up layer, and is suitable for Internet products with strong interactive requirements.

Description

Technical Field

[0001] This application relates to the field of page pop-up layer display technology, and in particular to a method, system, computer device and readable storage medium for configuring animation components of a pop-up layer, as well as a method for displaying a pop-up layer. Background Technology

[0002] As applications support increasingly complex business logic, they often involve numerous pop-up layers for content display. For example, live streaming requires various pop-ups to showcase products to users. Currently, pop-up web page display solutions typically utilize popup components from mint-ui and ant-design.

[0003] However, existing pop-up webpage display solutions are not suitable for some internet products with strong interactive requirements, such as web games. Summary of the Invention

[0004] In view of this, the purpose of this application embodiment is to provide a pop-up layer display method, system, computer device and computer-readable storage medium to solve the following problem: existing pop-up layer web page display solutions are not suitable for some Internet products with strong interactive requirements.

[0005] One aspect of this application provides a method for configuring an animation component in a pop-up layer. The method includes: configuring a target component, the target component including multiple animation code segments for implementing multiple animation effects; configuring a parameter entry for the target component, the parameter entry being used to receive an animation type parameter representing an animation type, the target component being instantiated according to the entry parameter to obtain a target component instance, the target component instance being used to control the target pop-up layer to execute a target animation effect corresponding to the animation type parameter.

[0006] Optionally, the parameter input is also used to receive visualization parameters; the target component instance is also used to control the display state of the target pop-up layer according to the visualization parameters.

[0007] Optionally, the parameter input is also used to receive display area style parameters; the target component instance is also used to control the display area and display style of the target pop-up layer according to the display area style parameters.

[0008] Optionally, the parameter input is also used to receive an animation duration parameter; the target component instance is also used to control the display duration of the target pop-up layer according to the animation duration parameter.

[0009] Optionally, when the animation type parameter is received through the parameter interface, the target component is further configured to perform the following operations during the component initialization phase: concatenate the first string according to the animation type parameter and the animation display suffix; concatenate the second string according to the animation type parameter and the animation close suffix; and pass the first string and the second string to the classname attribute of the DOM element of the root node of the target component.

[0010] Optionally, when the animation duration parameter is received through the parameter interface, the target component is also used to perform the following operations during the component initialization phase: concatenate the animation duration parameter into a third string; and pass the third string to the -webkit-animation-duration property of the styleSheets property of the DOM element of the root node of the target component.

[0011] Optionally, each animation effect is composed of multiple animations, and each animation effect includes the animation effect when the pop-up is displayed and the animation effect when the pop-up is exited.

[0012] One aspect of this application provides an animation component configuration system for a pop-up layer. The system includes: a first configuration module for configuring a target component, the target component including multiple animation code segments for implementing multiple animation effects; and a second configuration module for configuring a parameter entry for the target component, the parameter entry being used to receive an animation type parameter representing the animation type, the target component being instantiated according to the entry parameter to obtain a target component instance, the target component instance being used to control the target pop-up layer to execute a target animation effect corresponding to the animation type parameter.

[0013] One aspect of this application provides a computer device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the pop-up layer animation component configuration method described above.

[0014] One aspect of this application provides a computer-readable storage medium, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the pop-up layer animation component configuration method described above.

[0015] One aspect of this application provides a method for displaying a pop-up layer, the method comprising: instantiating a target component according to an input parameter to obtain a target component instance, the input parameter including an animation type parameter representing an animation type, the target component encapsulating multi-segment animation code for implementing multiple animation effects; and controlling the target pop-up layer to execute a target animation effect corresponding to the animation type parameter through the target component instance.

[0016] Optionally, the input parameters include visualization parameters; the method further includes:

[0017] The display state of the target pop-up layer is controlled by the target component instance based on the visualization parameters.

[0018] Optionally, the entry parameters include display area style parameters; the method further includes:

[0019] The display area and display style of the target pop-up layer are controlled by the target component instance according to the display area style parameters.

[0020] Optionally, the input parameters include animation duration parameters; the method further includes: controlling the display duration of the target pop-up layer through the target component instance according to the animation duration parameters.

[0021] Optionally, when the animation type parameter is received through the parameter interface, the method further includes an initialization operation for the target component: concatenating a first string according to the animation type parameter and the animation display suffix; concatenating a second string according to the animation type parameter and the animation close suffix; and passing the first string and the second string to the classname attribute of the DOM element of the root node of the target component.

[0022] Optionally, when the animation duration parameter is received through the parameter interface, the method further includes an initialization operation for the target component: concatenating the animation duration parameter into a third string; and passing the third string to the -webkit-animation-duration property of the styleSheets attribute of the DOM element of the root node of the target component.

[0023] Optionally, each animation effect is composed of multiple animations, and each animation effect includes the animation effect when the pop-up is displayed and the animation effect when the pop-up is exited.

[0024] The pop-up layer animation component configuration method, system, computer device, and computer-readable storage medium provided in this application have the following advantages:

[0025] (1) By encapsulating multi-segment animation code with various animation effects and configuring a single component that controls the pop-up layer, the interactive forms of the pop-up layer are effectively diversified and highly customizable, making it suitable for Internet products with strong interactive requirements.

[0026] (2) Since the target component encapsulates multi-segment animation code with various animation effects, different animation type parameters can be provided to the target component to switch the animation type of the pop-up layer or extend the custom animation type. Attached Figure Description

[0027] Figure 1 This diagram schematically illustrates an application environment for a pop-up layer animation component configuration method according to an embodiment of this application.

[0028] Figure 2 A flowchart illustrating the method for configuring animation components in a pop-up layer according to Embodiment 1 of this application is shown in the schematic diagram.

[0029] Figure 3 A list of component configuration parameters according to an embodiment of this application is illustrated schematically;

[0030] Figure 4 This illustration schematically shows the operation flow of the initialization phase of the target component according to an embodiment of this application;

[0031] Figure 5 This illustration schematically shows the operation flow of the initialization phase of the target component according to an embodiment of this application;

[0032] Figure 6 A block diagram of the pop-up layer animation component configuration system according to Embodiment 2 of this application;

[0033] Figure 7 This illustration schematically shows a hardware architecture diagram of a computer device according to Embodiment 3 of this application;

[0034] Figure 8 A flowchart illustrating a pop-up layer display method according to Embodiment 5 of this application is shown schematically; and

[0035] Figures 9 to 13 The diagram illustrates a new flowchart of the pop-up layer display method according to Embodiment 5 of this application. Detailed Implementation

[0036] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0037] It should be noted that the descriptions involving "first," "second," "third," etc., in this application are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. Furthermore, the technical solutions of the various embodiments can be combined with each other, but this must be based on the ability of those skilled in the art to implement them. When the combination of technical solutions is contradictory or impossible to implement, such a combination of technical solutions should be considered non-existent and not within the scope of protection claimed in this application.

[0038] Figure 1 The illustration shows an environmental application diagram of the pop-up layer animation component configuration method according to an embodiment of this application.

[0039] Computer device 2 can be configured to receive page information from server 4 via network 6. Computer device 2 may include any type of computing device, such as mobile devices, tablets, laptops, computing stations, smart devices (e.g., smart clothing, smartwatches, smart speakers, smart glasses), virtual reality devices, gaming devices, set-top boxes, digital streaming devices, in-vehicle terminals, smart TVs, TV boxes, MP4 (Moving Picture Experts Group Audio Layer IV) players, etc.

[0040] In an exemplary embodiment, computer device 2 may include application 8 (e.g., a browser). Application 8 outputs (e.g., displays, presents) content to the user. The content may be presented in a page-like manner and may include video, audio, comments, text data and / or the like, or may be presented in a pop-up layer, such as a dialog box.

[0041] The computer device 2 may include a user interface 10, which can be configured to receive user commands. In some embodiments, the computer device 2 may also be used for configuration operations, such as customizing various pop-up effects of pop-up layers.

[0042] Example 1

[0043] Figure 2A flowchart illustrating a method for configuring animation components in a pop-up layer according to Embodiment 1 of this application is shown. This embodiment can be executed in a computer device 2, and the flowchart in this embodiment is not intended to limit the order of execution steps.

[0044] like Figure 2 As shown, the method for configuring the animation component of the pop-up layer may include steps S200 to S202, wherein:

[0045] Step S200: Configure the target component, which includes multi-segment animation code for implementing multiple animation effects.

[0046] As examples, the various animation effects include, but are not limited to: fade, zoom, rotate, flip, door, move-up, move-down, move-left, move-right, slide-up, slide-down, slide-left, and slide-right.

[0047] As an example, to diversify animation effects, each animation effect can be composed of multiple animations, and each animation effect includes the animation effect when the pop-up is displayed and the animation effect when the pop-up is closed. Correspondingly, each animation type in the target component has two animation code segments, one of which controls the animation effect when the pop-up is displayed, and the other of which controls the animation effect when the pop-up is closed. Taking the animation type slide-up as an example, we can define: (1) the display animation code corresponding to the animation type slide-up (this code segment is named: slide-up-enter-active) and (2) the exit animation code corresponding to the animation type slide-up (this code segment is named: slide-up-leave-active). Among them, the display animation code slide-up-enter-active controls the animation effect when the pop-up is displayed, and the exit animation code slide-up-leave-active controls the animation effect when the pop-up is closed. In addition, the animation effect can be composed of a series of animation techniques such as 3D scaling, 3D rotation, 3D deformation, depth of field, and transparency changes, which are specifically implemented by the @keyframe identifier provided by CSS.

[0048] Multiple animation codes are in .CSS format and exist in a single animation.css animation library file.

[0049] Step S202: Configure a parameter entry for the target component. The parameter entry is used to receive an animation type parameter that represents the animation type. The target component is instantiated according to the entry parameter to obtain a target component instance. The target component instance is used to control the target pop-up layer to execute the target animation effect corresponding to the animation type parameter.

[0050] The animationType parameter controls the animation effects when the pop-up is displayed.

[0051] As an example, the animationType parameter can take the following values: 'fade', 'zoom', 'rotate', 'flip', 'door', 'move-up', 'move-down', 'move-left', 'move-right', 'slide-up', 'slide-down', 'slide-left', or 'slide-right'.

[0052] For example, if the animationType parameter passed to the parameter entry is 'fade', then the target component instance obtained by instantiating the target component is used to control the target pop-up layer to perform the target animation effect of "fade in and fade out".

[0053] For example, if the animationType parameter passed to the parameter entry is 'slide-left', then the target component instance obtained by instantiating the target component is used to control the target pop-up layer to perform the target animation effect of "slide to the left".

[0054] The following examples will not be listed one by one. As can be seen from the above examples, in the embodiments described herein, the animation type of the pop-up layer can be switched or a custom animation type can be extended by providing different animationType parameters.

[0055] The pop-up layer animation component configuration method described in Embodiment 1 of this application:

[0056] Firstly, by encapsulating multi-segment animation code with various animation effects and configuring a single component that controls the pop-up layer, the interactive forms of the pop-up layer's webpage display are effectively diversified and highly customizable, thus improving the user experience.

[0057] Secondly, due to its single-component nature, it boasts advantages in reusability and versatility. Therefore, the configured target component can be directly accessed by web developers as an SDK (Software Development Kit), eliminating the need for developers to repeatedly create animation code for each webpage, thus reducing the amount of animation code. In other words, redundant animation code is reduced, improving the development efficiency of pop-up layers.

[0058] Thirdly, when it is necessary to add or modify the animation type of the pop-up layer, the target component can be modified on the server side, without developers having to modify the animation code of the pop-up layer for each webpage, thus improving development and maintenance efficiency.

[0059] Fourthly, since the target component encapsulates multi-segment animation code with various animation effects, different animationType parameters can be provided to the target component to switch the animation type of the pop-up layer or extend the custom animation type.

[0060] As an example, the parameter input is also used to receive visualization parameters. The target component instance is also used to control the display state of the target pop-up layer according to the visualization parameters. For example, if the visible parameter is set to 'true', it means the pop-up layer is hidden; if the visible parameter is set to 'false', it means the pop-up layer is displayed. The parameters provided in this embodiment can be used to control the display and hiding of the target pop-up layer.

[0061] As an example, the parameter input is also used to receive display area style parameters. The target component instance is also used to control the display area and display style of the target pop-up layer according to the display area style parameters. For example, if the display area style (align) parameter is 'center', it means the pop-up layer is controlled to be in the middle of the page; if the align parameter is 'top', it means the pop-up layer is controlled to be at the top of the page; if the align parameter is 'bottom', it means the pop-up layer is controlled to be at the bottom of the page; if the align parameter is 'left', it means the pop-up layer is controlled to be on the left side of the page; and if the align parameter is 'right', it means the pop-up layer is controlled to be on the right side of the page. The parameters provided in this embodiment can control the anchor position of the target pop-up layer on the page.

[0062] As an example, the parameter input is also used to receive an animation duration parameter. The target component instance is also used to control the display duration of the target pop-up layer according to the animation duration parameter. The animation duration parameter provided in this embodiment can control the execution time of the animation effect of the target pop-up layer.

[0063] It should be noted that the parameter input can also receive other parameters based on the function of the target component. For example... Figure 3 As shown, the reference entry can also be used to receive the following parameters: prefixCls (style prefix) parameter, hasMask (whether there is a mask) parameter, maskType (mask type, such as transparent type, normal type) parameter, etc.

[0064] In addition, regarding animation processing:

[0065] As an example, such as Figure 4 As shown, when the animation type parameter is received through the parameter interface, the target component is further configured to perform the following operations during the component initialization phase: Step S400, concatenate the animation type parameter and the animation display suffix to obtain a first string; Step S402, concatenate the animation type parameter and the animation close suffix to obtain a second string; Step S404, pass the first string and the second string to the classname attribute of the DOM element of the root node of the target component. This embodiment aims to locate the animation code (animation code when the pop-up is displayed and animation code when the pop-up is closed) in the target component using the first string and the second string. For example, the target component encapsulates the display animation code (named: zoom-enter-active) and the exit animation code (named: zoom-leave-active) corresponding to the zoom animation type of the pop-up. When the target component receives the animationType parameter "zoom" through the parameter entry, it concatenates the two strings "zoom-enter-active" and "zoom-leave-active", and then passes this string to the classname attribute of the root node DOM element of the target component, thereby quickly locating the exit animation code of the "zoom animation type corresponding to the pop-up layer" and the "exit animation code of the zoom animation type corresponding to the pop-up layer".

[0066] As an example, such as Figure 5As shown, when the animation duration parameter is received through the parameter interface, the target component is further configured to perform the following operations during the component initialization phase: Step S500, concatenate the animation duration parameter into a third string; Step S502, pass the third string to the `-webkit-animation-duration` property of the `styleSheets` attribute of the DOM element of the root node of the target component. In this embodiment, the animation duration (e.g., 300 milliseconds) is inserted into the corresponding animation code in the target component through steps S500 to S502. For example, the third string can be in the following form: `:${this.animationDuration}ms; animation-duration:${this.animationDuration}ms`.

[0067] Example 2

[0068] Figure 6 The diagram illustrates a block diagram of a pop-up layer animation component configuration system according to Embodiment 2 of this application. This communication system can be divided into one or more program modules. One or more program modules are stored in a storage medium and executed by one or more processors to complete the embodiment of this application. The program module referred to in this embodiment is a series of computer program instruction segments capable of performing specific functions. It is more suitable than the program itself to describe the execution process of the pop-up layer animation component configuration system in the storage medium. The following description will specifically introduce the functions of each program module in this embodiment.

[0069] like Figure 6 As shown, the animation component configuration system 600 of the pop-up layer may include a first configuration module 610 and a first configuration module 620, wherein:

[0070] The first configuration module 610 is used to configure a target component, which includes multi-segment animation code for implementing multiple animation effects.

[0071] The second configuration module 620 is used to configure a parameter entry for the target component. The parameter entry is used to receive an animation type parameter that represents the animation type. The target component is instantiated according to the entry parameter to obtain a target component instance. The target component instance is used to control the target pop-up layer to execute the target animation effect corresponding to the animation type parameter.

[0072] In an exemplary embodiment, the parameter entry is further configured to receive visualization parameters; the target component instance is further configured to control the display state of the target pop-up layer according to the visualization parameters.

[0073] In an exemplary embodiment, the parameter input is further configured to receive display area style parameters; the target component instance is further configured to control the display area and display style of the target pop-up layer according to the display area style parameters.

[0074] In an exemplary embodiment, the parameter input is further used to receive an animation duration parameter; the target component instance is further used to control the display duration of the target pop-up layer according to the animation duration parameter.

[0075] In an exemplary embodiment, when the animation type parameter is received through the parameter interface, the target component is further configured to perform the following operations during the component initialization phase: concatenate a first string according to the animation type parameter and the animation display suffix; concatenate a second string according to the animation type parameter and the animation close suffix; and pass the first string and the second string to the classname attribute of the DOM element of the root node of the target component.

[0076] In an exemplary embodiment, when the animation duration parameter is received through the parameter interface, the target component is further configured to perform the following operations during the component initialization phase: concatenate the animation duration parameter into a third string; and pass the third string to the -webkit-animation-duration property of the styleSheets attribute of the DOM element of the root node of the target component.

[0077] In an exemplary embodiment, each animation effect is composed of multiple animations, and each animation effect includes an animation effect when the pop-up is displayed and an animation effect when the pop-up is exited.

[0078] Example 3

[0079] Figure 7 This illustration schematically shows a hardware architecture diagram of a computer device suitable for implementing an animation component configuration method for pop-up layers according to Embodiment 3 of this application. In this embodiment, the computer device 2 is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions. Examples include mobile devices, tablet devices, laptop computers, computing stations, smart devices (e.g., smart clothing, smartwatches, smart speakers, smart glasses), virtual reality devices, gaming devices, set-top boxes, digital streaming devices, in-vehicle terminals, smart TVs, TV boxes, MP4 (Moving Picture Experts Group Audio Layer IV) players, and server-based virtual terminal devices, etc. Figure 7 As shown, computer device 2 includes, but is not limited to: a memory 710, a processor 720, and a network interface 730 that can communicate with each other via a system bus. Wherein:

[0080] The memory 710 includes at least one type of computer-readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 710 may be an internal storage module of the computer device 2, such as the hard disk or memory of the computer device 2. In other embodiments, the memory 710 may also be an external storage device of the computer device 2, such as a plug-in hard disk, smart media card (SMC), secure digital card (SD), flash card, etc., equipped on the computer device 2. Of course, the memory 710 may also include both the internal storage module and its external storage device of the computer device 2. In this embodiment, the memory 710 is typically used to store the operating system and various application software installed on the computer device 2, such as the program code of the animation component configuration method of the pop-up layer. In addition, the memory 710 can also be used to temporarily store various types of data that have been output or will be output.

[0081] In some embodiments, processor 720 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. This processor 720 is typically used to control the overall operation of computer device 2, such as performing control and processing related to data interaction or communication with computer device 2. In this embodiment, processor 720 is used to run program code stored in memory 710 or process data.

[0082] Network interface 730 may include a wireless network interface or a wired network interface, which is typically used to establish a communication link between computer device 2 and other computer devices. For example, network interface 730 is used to connect computer device 2 to an external terminal via a network, establishing a data transmission channel and communication link between computer device 2 and the external terminal. The network may be an intranet, the Internet, Global System for Mobile Communication (GSM), Wideband Code Division Multiple Access (WCDMA), 4G network, 5G network, Bluetooth, Wi-Fi, or other wireless or wired networks.

[0083] It should be pointed out that, Figure 7 Only computer devices with components 710-730 are shown; however, it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead.

[0084] In this embodiment, the pop-up layer animation component configuration method stored in memory 710 can also be divided into one or more program modules and executed by one or more processors (processor 720 in this embodiment) to complete this application.

[0085] Example 4

[0086] This embodiment also provides a computer-readable storage medium storing a computer program thereon. When the computer program is executed by a processor, it implements the steps of the pop-up layer animation component configuration method in this embodiment.

[0087] In this embodiment, the computer-readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the computer-readable storage medium may be an internal storage unit of a computer device, such as the hard disk or memory of the computer device. In other embodiments, the computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device. Of course, the computer-readable storage medium may include both the internal storage unit and the external storage device of the computer device. In this embodiment, the computer-readable storage medium is typically used to store the operating system and various application software installed on the computer device, such as the program code of the animation component configuration method of the pop-up layer in the embodiment. In addition, the computer-readable storage medium can also be used to temporarily store various types of data that have been output or will be output.

[0088] Example 5

[0089] Unlike the animation component configuration scheme for the pop-up layer in Embodiment 1, this embodiment aims to reveal the display scheme for the pop-up layer. However, the technical details and effects of this embodiment can be found in Embodiment 1 to avoid redundancy.

[0090] Figure 8 A flowchart illustrating a pop-up layer display method according to Embodiment 5 of this application is shown schematically. This embodiment can be executed in computer device 2, and the flowchart of this embodiment is not intended to limit the order of execution steps.

[0091] like Figure 8 As shown, the method for displaying the pop-up layer may include steps S800 to S802, wherein:

[0092] Step S800: Instantiate the target component according to the input parameters to obtain the target component instance. The input parameters include an animation type parameter representing the animation type. The target component encapsulates multi-segment animation code for implementing multiple animation effects.

[0093] Step S802: Control the target pop-up layer to execute the target animation effect corresponding to the animation type parameter through the target component instance.

[0094] In an exemplary embodiment, the input parameters include visual parameters. For example... Figure 9 As shown, the method further includes step S900: controlling the display state of the target pop-up layer according to the visualization parameters through the target component instance.

[0095] In an exemplary embodiment, the entry parameters include display area style parameters. For example... Figure 10 As shown, the method further includes step S1000: controlling the display area and display style of the target pop-up layer through the target component instance according to the display area style parameters.

[0096] In an exemplary embodiment, the input parameters include an animation duration parameter. For example... Figure 11 As shown, the method further includes step S1100: controlling the display duration of the target pop-up layer by means of the target component instance according to the animation duration parameter.

[0097] In an exemplary embodiment, such as Figure 12 As shown, when the animation type parameter is received through the parameter interface, the method further includes an initialization operation for the target component: Step S1200, concatenating the animation type parameter and the animation display suffix to obtain a first string; Step S1202, concatenating the animation type parameter and the animation close suffix to obtain a second string; Step S1204, passing the first string and the second string to the classname attribute of the DOM element of the root node of the target component.

[0098] In an exemplary embodiment, such as Figure 13 As shown, when the animation duration parameter is received through the parameter interface, the method also includes an initialization operation for the target component: step S1300, concatenating the animation duration parameter into a third string; step S1302, passing the third string to the -webkit-animation-duration property of the styleSheets attribute of the DOM element of the root node of the target component.

[0099] In an exemplary embodiment, each animation effect is composed of multiple animations, and each animation effect includes an animation effect when the pop-up is displayed and an animation effect when the pop-up is exited.

[0100] Obviously, those skilled in the art should understand that the modules or steps of the embodiments of this application described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of multiple computing devices. Optionally, they can be implemented using computer-executable program code, thereby storing them in a storage device for execution by a computing device. In some cases, the steps shown or described can be performed in a different order than those presented here, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the embodiments of this application are not limited to any particular combination of hardware and software.

[0101] The above are merely preferred embodiments of this application and do not limit the patent scope of this application. Any equivalent structural or procedural transformations made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of this application.

Claims

1. A method for configuring animation components in a pop-up layer, characterized in that, The method includes: Configure a target component, which encapsulates multi-segment animation code for implementing multiple animation effects; A parameter entry is configured for the target component. The parameter entry is used to receive an animation type parameter that represents the animation type. The target component is instantiated according to the entry parameter to obtain a target component instance. The target component instance is used to control the target pop-up layer to execute the target animation effect corresponding to the animation type parameter. When the animation type parameter is received through the parameter input, the target component is also used to perform the following operations during the component initialization phase: The first string is obtained by concatenating the animation type parameter and the animation display suffix. The second string is obtained by concatenating the animation type parameter and the animation closing suffix. Pass the first string and the second string to the classname attribute of the DOM element of the root node of the target component; When the animation duration parameter is received through the parameter input, the target component is also used to perform the following operations during the component initialization phase: The third string is constructed by concatenating the animation duration parameters. The third string is passed to the -webkit-animation-duration property of the styleSheets attribute of the DOM element of the root node of the target component.

2. The method for configuring animation components in a pop-up layer according to claim 1, characterized in that, The parameter input is also used to receive visualization parameters; The target component instance is also used to control the display state of the target pop-up layer according to the visualization parameters.

3. The method for configuring animation components in a pop-up layer according to claim 1, characterized in that, The parameter input is also used to receive display area style parameters; The target component instance is also used to control the display area and display style of the target pop-up layer according to the display area style parameters.

4. The method for configuring animation components in a pop-up layer according to claim 1, characterized in that, The parameter input is also used to receive animation duration parameters; The target component instance is also used to control the display duration of the target pop-up layer according to the animation duration parameter.

5. The method for configuring animation components in a pop-up layer according to claim 1, characterized in that, Each animation effect is composed of multiple animations, and each animation effect includes the animation effect when the pop-up is displayed and the animation effect when the pop-up is exited.

6. A pop-up layer animation component configuration system, characterized in that, The system includes: The first configuration module is used to configure the target component, which includes multi-segment animation code for implementing multiple animation effects; The second configuration module is used to configure parameter entry for the target component. The parameter entry is used to receive an animation type parameter that represents the animation type. The target component is instantiated according to the entry parameter to obtain a target component instance. The target component instance is used to control the target pop-up layer to execute the target animation effect corresponding to the animation type parameter. When the animation type parameter is received through the parameter input, the target component is also used to perform the following operations during the component initialization phase: The first string is obtained by concatenating the animation type parameter and the animation display suffix. The second string is obtained by concatenating the animation type parameter and the animation closing suffix. Pass the first string and the second string to the classname attribute of the DOM element of the root node of the target component; When the animation duration parameter is received through the parameter input, the target component is also used to perform the following operations during the component initialization phase: The third string is constructed by concatenating the animation duration parameters. The third string is passed to the -webkit-animation-duration property of the styleSheets attribute of the DOM element of the root node of the target component.

7. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 5.

8. A computer-readable storage medium having a computer program stored thereon, characterized in that, The computer program may be executed by at least one processor to cause the at least one processor to perform the steps of the method as described in any one of claims 1 to 5.

9. A method for displaying a pop-up layer, characterized in that, The method includes: The target component is instantiated based on the input parameters to obtain a target component instance. The input parameters include an animation type parameter representing the animation type. The target component encapsulates multi-segment animation code for implementing multiple animation effects. The target component instance controls the target pop-up layer to execute the target animation effect corresponding to the animation type parameter; The method further includes initialization operations for the target component when the animation type parameter is received through the parameter input. The first string is obtained by concatenating the animation type parameter and the animation display suffix. The second string is obtained by concatenating the animation type parameter and the animation closing suffix. Pass the first string and the second string to the classname attribute of the DOM element of the root node of the target component; The method further includes initialization operations for the target component when an animation duration parameter is received through a parameter input. The third string is constructed by concatenating the animation duration parameters. The third string is passed to the -webkit-animation-duration property of the styleSheets attribute of the DOM element of the root node of the target component.

10. The pop-up layer display method according to claim 9, characterized in that, The input parameters include visualization parameters; the method further includes: The display state of the target pop-up layer is controlled by the target component instance based on the visualization parameters.

11. The pop-up layer display method according to claim 9, characterized in that, The input parameters include display area style parameters; the method further includes: The display area and display style of the target pop-up layer are controlled by the target component instance according to the display area style parameters.

12. The pop-up layer display method according to claim 9, characterized in that, The input parameters include animation duration parameters; the method further includes: The display duration of the target pop-up layer is controlled by the target component instance based on the animation duration parameter.

13. The pop-up layer display method according to claim 9, characterized in that, Each animation effect is composed of multiple animations, and each animation effect includes the animation effect when the pop-up is displayed and the animation effect when the pop-up is exited.

14. A computer program product, comprising a computer program, characterized in that, When executed by a processor, the computer program implements the steps of the method according to any one of claims 1 to 5.

Images