A web element transition and document flow management method, system, device and medium

Abstract

The application provides a Web element transition and document flow management method, system, device and medium, belonging to the technical field of CSS front-end research and development, and develops around the display and hiding operation of a target element. The initial state of the target element is configured to realize visual hiding and document flow removal; when displayed, the hidden attribute is removed to make it enter the document flow, and then the layout is forcibly re-arranged, and then the slide-in animation is realized by modifying the transform attribute. When hidden, the transform attribute is modified to start the slide-out animation and bind the event listener, and after the animation ends, the hidden attribute is added to remove the element, and the event listener and timer are also cleared. By combining the hidden attribute and the transform animation, the application can realize the transition effect of element display and hiding. When displayed, the layout is re-arranged to ensure accurate layout, and when hidden, the timing is accurately controlled through event listening to avoid abnormal display or layout disorder of page elements, thereby improving user experience and page stability.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of CSS front-end research and development, and particularly relates to a Web element transition and document flow management method, system, device and medium. BACKGROUND

[0002] Front-end interactive component development is one of branches of Web application development. With the user's requirement for Web application interaction experience upgrading from usability to fluency, dynamic display / hide class components have been widely used in e-commerce, social networking, office collaboration and other scenarios. The sidebar of the product detail page of the e-commerce APP needs to display the specification parameters, and the sidebar navigation bar of the office collaboration tool needs to support quick expansion / folding. The core requirements of the industry for such components include: animation fluency, cross-browser compatibility, multiple operations without exception, and avoiding memory leakage or style residue.

[0003] In the related art, the development of the sidebar shopping cart component of the e-commerce website needs to realize the requirement that the shopping cart slides in from the right side when the icon is clicked, slides out from the right side when the icon is closed, and does not occupy the right side blank of the page after sliding out. If the shopping cart is hidden by using transform: translateX, although the sliding in / out animation can be triggered by modifying transform, the element still occupies the right side space in the document flow, which destroys the integrity of the page layout.

[0004] If the shopping cart is hidden by using hidden or display: none, the element can be removed from the document flow, but the transition animation cannot be triggered when the attribute is added / removed, and the shopping cart will suddenly appear after the icon is clicked and suddenly disappear after the icon is closed, which is a harsh interaction.

[0005] In the related art, when the drawer slides out, the hover transition of the internal submit button is completed first, a transitionend event is triggered, the event is transmitted to the drawer element through bubbling, and if the event target is not checked, the drawer sliding out animation will be added with the hidden attribute, the animation will be interrupted in the middle, and the drawer will suddenly disappear, which causes the transition animation to be unable to be normally triggered or prematurely interrupted.

[0006] In the related art, the state judgment is based on the hidden attribute, and the state is judged by whether the hidden attribute exists. When the popup is in the sliding in state, it will be judged as stable display, and at this time, clicking the close button will repeatedly execute the sliding out animation, causing the transform style conflict, and the popup will shake. If a setTimeout is used to delay setting display: none, when the user clicks to open again before the timer is executed, the timer that is not cleaned up will be executed after the delay, and the popup that is just opened will be set as display: none again, causing the abnormality that the popup flashes and disappears. SUMMARY

[0007] The application provides a web element transition and document flow management method, which realizes smooth animation effect of a drawer type component and expected effect of the component being separated from a document flow during hiding through a process of state initialization, display triggering, transition execution, hiding completion and resource cleaning. The method improves user interaction animation fluency without lag, ensures that a page does not occupy space after being hidden, reduces code maintenance cost through state management and event processing, and provides a high-reliability underlying implementation mode for front-end interactive component development.

[0008] The method comprises the following steps:

[0009] S101: configuring an initial state of a target element, so that the target element has a transform-based visual hiding state and a hidden attribute-based document flow removal state;

[0010] S102: when the target element is displayed, removing the hidden attribute to make the target element enter the document flow;

[0011] S103: after the hidden attribute is removed, forcibly reflowing the document by reading an offsetWidth or clientHeight attribute of the target element;

[0012] S104: based on a state after the reflowing, modifying a transform attribute of the target element to make the target element slide from outside the viewport into the viewport, and realizing a display transition animation;

[0013] S105: when the target element needs to be hidden, modifying the transform attribute of the target element to make the target element transition from inside the viewport to outside the viewport, starting a hiding transition animation, and binding a transitionend event listener to the target element to monitor an animation end opportunity;

[0014] S106: in the bound transitionend event listener, checking whether a target of a triggering event is the target element in step S101;

[0015] S107: after confirming that the transition animation ends, adding the hidden attribute to the target element to remove the target element from the document flow, and clearing the transitionend event listener bound in step S105 and a timer for delaying hiding when a display operation is performed.

[0016] It is further needed to be explained that S101 specifically comprises the following steps:

[0017] S1011: defining a transform attribute of the target element through a CSS rule, and moving the element outside the viewport by using a displacement function translateX, translateY or translateZ;

[0018] S1012: Add a hidden attribute directly in the HTML tag of the target element, or set the hidden attribute dynamically through JavaScript, so that the element is initially invisible and does not occupy the document flow space;

[0019] S1013: Set the transition attribute for the target element through CSS rules, specify the transform attribute as the transition target, and define the transition duration and easing function to ensure that subsequent attribute changes can trigger smooth animations;

[0020] S1014: Use JavaScript to create a state management function to record the current transform value and hidden state of the element at initialization;

[0021] S1015: Through JavaScript event listening initialization, pre-bind the transitionend event listener for the target element, and set it to an inactive state.

[0022] Further need to explain is, S103 specifically includes the following steps:

[0023] S1031: Confirm that the hidden attribute of the target element has been completely removed through the attribute inspection method of JavaScript;

[0024] S1032: Select at least one attribute from the preset rearrangement trigger attribute set, and select the appropriate attribute according to the layout characteristics of the target element;

[0025] S1033: Read the attribute value selected in step S1032 through JavaScript code;

[0026] S1034: After obtaining the attribute value read in step S1033, store it in a temporary variable;

[0027] S1035: If the attribute reading in step S1033 does not trigger rearrangement, select other attributes from the set in step S1032 and repeat step S1033;

[0028] S1036: After the rearrangement operation is completed, set a boolean type state variable to true to mark that the document has completed the reflow.

[0029] Further need to explain is, S104 specifically includes the following steps:

[0030] S1041: Determine whether the document has completed the reflow by reading the set state variable isReflowCompleted, and execute the subsequent operation when the state variable value is true.

[0031] S1042: Select a target value corresponding to the initial offset direction of the target element from the preset transform target value set;

[0032] S1043: Call the window.requestAnimationFrame() method to perform the transform attribute modification operation before the next browser redraw, and assign the target value selected in step S1042 to the style.transform attribute of the target element;

[0033] S1044: Bind a transitionstart event listener to the target element to monitor whether the CSS transition animation has started execution;

[0034] S1045: If the transitionstart event does not trigger within the preset time threshold, re-execute the transform attribute modification operation in step S1043;

[0035] S1046: When the transitionstart event is triggered, remove the event listener and set the display state variable of the target element to true.

[0036] Further, S105 specifically includes the following steps:

[0037] S1051: Read the set display state variable isShowing. When the display state variable value is true, execute the subsequent hiding related operation; if it is false, terminate the current process;

[0038] S1052: Determine the transform target value when sliding out according to the initial transform offset direction of the target element;

[0039] S1053: Call the window.requestAnimationFrame() method to assign the transform target value determined in step S1052 to the style.transform attribute of the target element within the next browser redraw cycle;

[0040] S1054: Define a transitionend event listener function handleTransitionEnd containing the state processing logic after the transition ends, and assign the function to the preset global or module scope variable;

[0041] S1055: Bind a transitionend event to the target element via its addEventListener() method, with the event handler function specified as handleTransitionEnd defined in step S1054, and set the event capture mode to false;

[0042] S1056: Modify the set display state variable isShowing to false, and define a timer identifier variable hideTimer and initialize it to null.

[0043] It is further needed to be explained that S106 specifically includes the following steps:

[0044] S1061: Based on the defined handleTransitionEnd event listener function, receive the Event event object passed by the browser, which contains the relevant information of the current transition event;

[0045] S1062: Extract the target attribute value from the obtained Event event object, which points to the actual DOM element that triggered the transitionend event, i.e., the event origin element;

[0046] S1063: Reacquire the target element using the previously used DOM selector, ensuring that the latest target element reference in the current DOM tree is obtained;

[0047] S1064: Use the equality operator to compare the target element extracted in step S1062 with the target element reacquired in step S1063, to determine whether they are the same DOM element;

[0048] S1065: If the comparison result in step S1064 is false, i.e., the target is not the target element, call the contains() method of the target element obtained in step S1063, passing in the target element as a parameter, to determine whether the target is a descendant element of the target element;

[0049] S1066: Based on the comparison result in step S1064 and the return value of the contains() method in step S1065, define a Boolean variable isTargetValid: when the result of step S1064 is true, isTargetValid is set to true; when the result of step S1064 is false and the result of step S1065 is true, isTargetValid is set to false; otherwise, isTargetValid is set to false.

[0050] It is further needed to be explained that S107 specifically comprises the following steps:

[0051] In the transitionend event callback function, the event trigger source is verified by comparing event.target with the pre-stored target element node reference;

[0052] If the verification is passed, the setAttribute method of the target element is called to set the hidden attribute to an empty string;

[0053] In the display element function, the transitionend event listener is removed by the removeEventListener method;

[0054] In the display element function, the clearTimeout function is used to clear the timer ID stored in the hideTimer variable;

[0055] Before displaying the element, the style.transform attribute of the target element is set to the initial offset value;

[0056] The current set state is confirmed by reading the hidden attribute value of the target element.

[0057] The application also provides a Web element transition and document flow control system, which comprises:

[0058] An initial state configuration module is configured to configure the initial state of the target element, so that it has transform-based visual hiding and hidden attribute-based document flow removal state;

[0059] A display attribute removal module is configured to remove the hidden attribute when the target element is displayed, so that the target element enters the document flow;

[0060] A forced reflow module is configured to read the offsetWidth or clientHeight attribute of the target element after removing the hidden attribute, and force the document to reflow;

[0061] A display animation implementation module is configured to modify the transform attribute of the target element based on the reflowed state, so that it slides from outside the viewport to inside the viewport, and realizes the display transition animation;

[0062] A hidden animation starting module is configured to modify the transform attribute of the target element when the target element needs to be hidden, so that the target element transitions from inside the viewport to outside the viewport, starts the hidden transition animation, and binds the transitionend event listener to the target element to monitor the animation end opportunity;

[0063] The animation target check module is used to check whether the target of the event that triggered the event is the target element in the bound transitionend event listener;

[0064] The hidden handling module is used to add the hidden property to the target element after the transition animation has ended, so that it is removed from the document flow, and to clear the bound transitionend event listeners and existing timers used for delayed hiding when the display operation is performed.

[0065] According to another embodiment of this application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of the Web element transition and document flow control method.

[0066] According to another embodiment of this application, a storage medium is also provided, on which a computer program is stored, wherein the computer program, when executed by a processor, implements the steps of a Web element transition and document flow control method.

[0067] As can be seen from the above technical solutions, the present invention has the following advantages:

[0068] The Web element transition and document flow control method provided by this invention implements slide-in and slide-out animations using transform to meet visual interaction requirements. The hidden property removes the element from the document flow after the animation ends, achieving compatibility between hidden / display:none and transition animations.

[0069] This invention ensures that changes to the transform style can be recognized by the browser and trigger the transition by forcing a reflow, eliminates interference from child element bubbling by using target validation of the transitionend event, and prevents the hidden element from being executed before the animation ends by using a timer to clear the animation, thus ensuring that the animation is smooth and uninterrupted throughout.

[0070] This invention achieves precise element mapping through state markers such as the `isShowing` variable and the `hideTimer` timer identifier. It is based on native browser APIs such as `transform`, `transition`, and `hidden`. By employing logic such as reordering and retries, element reference validity checks, and listener removal, it addresses edge cases involving differences in browser optimization strategies and dynamic changes in the DOM structure, reducing error reporting. For developers, there's no need to repeatedly write the underlying logic for transition animations and document flow management; this solution can be directly reused to quickly implement dynamic display / hiding functionality for components such as drawers, pop-ups, and sidebars, reducing development complexity and improving code maintainability. Attached Figure Description

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

[0072] Figure 1 Flowchart of Web element transition and document flow control methods;

[0073] Figure 2 A schematic diagram of a web element transition and document flow control system;

[0074] Figure 3 This is a schematic diagram of an electronic device. Detailed Implementation

[0075] The following describes in detail the Web element transition and document flow control method involved in this application. Specific details such as particular system structures and technologies are presented for illustrative purposes rather than limiting, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application can also be implemented in other embodiments without these specific details.

[0076] It should be understood that, when used in this specification, terms include indicating the presence of a described feature, integral, step, operation, element, and / or component, but do not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components, and / or collections thereof. The terms include, encompass, have, and variations thereof mean including but not limited to, unless otherwise specifically emphasized.

[0077] The statements such as "one embodiment" or "some embodiments" described in this application mean that one or more embodiments of this application include the specific features, structures, or characteristics described in that embodiment. Therefore, the statements such as "in one embodiment," "in some embodiments," "in other embodiments," and "in still other embodiments" in this application do not necessarily refer to the same embodiment, but rather mean one or more, but not all, embodiments, unless otherwise specifically emphasized.

[0078] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0079] Please see Figure 1The diagram shows a flowchart of a web element transition and document flow control method in a specific embodiment. The method includes:

[0080] S101: Configure the initial state of the target element, giving it a visually hidden state based on transform and a document flow removal state based on the hidden attribute.

[0081] In some embodiments, when configuring the initial state of a target element, the target element's identifier is explicitly defined, which can be determined by a specific class name or ID. When setting the CSS `transform` property, an offset value is selected based on the element's preset slide-in direction to ensure the element completely moves out of the viewport. The `hidden` property is directly used in the HTML tag without setting a specific value, only retaining the property name. This ensures the element is initially invisible while preventing it from occupying layout space.

[0082] In some specific implementations, the `transitionend` event is triggered when the CSS transition effect ends. This feature provides strong support for precise control over element state changes. In practical applications, taking a common drawer menu as an example, transition animations are triggered by adding or removing specific class names. Suppose there is a drawer menu element that is initially hidden without the `.is-open` class name. When the user performs a corresponding action (such as clicking a button), adding the `.is-open` class name to it will activate the predefined transition rules in the CSS, and the drawer menu will appear with a smooth animation effect. Similarly, removing the `.is-open` class name will automatically trigger the transition effect, causing the drawer menu to gradually hide.

[0083] To accurately add the `hidden` property to an element after the transition, you can utilize the callback function of the `transitionend` event. Specifically, obtain the target element and then bind a `transitionend` event listener to it. Here, the event listener function `handleTransitionEnd` can be stored as a variable, allowing for smooth removal of the listener after the transition. If it's not removed promptly, the previously bound event callback will trigger again when the element is displayed again, leading to unexpected errors. Furthermore, what if the user clicks to show the `.drawer` again while it's still hidden but not completely hidden? In this case, to ensure the correctness of the code logic, manually remove the event listener once in the `show()` function of the displayed element.

[0084] S102: When displaying the target element, remove the hidden attribute, allowing the target element to enter the document flow.

[0085] In some embodiments, when a display action is triggered and the user clicks the button, the `removeAttribute` method of JavaScript is used to remove the `hidden` attribute of the target element. Before performing this operation, it is necessary to confirm that the element currently has the `hidden` attribute, allowing the element to enter a renderable state from outside the document flow, which conforms to the native behavior of HTML attributes.

[0086] S103: After removing the hidden attribute, force the document to be reformatted by reading the offsetWidth or clientHeight attribute of the target element.

[0087] In some embodiments, after removing the `hidden` attribute, layout-related properties such as `offsetWidth` or `clientHeight` of the target element are read via JavaScript. When selecting a property, the appropriate one is chosen based on the element type; for example, `offsetHeight` is selected for block-level elements, and `clientWidth` for inline elements. This value is not used after being read; it is only used to trigger a reflow. This solves the problem that simply removing the `hidden` attribute cannot trigger subsequent transition animations, ensuring that subsequent style modifications can be captured by the browser and the transition effects are executed.

[0088] S104: Based on the rearranged state, modify the transform property of the target element to make it slide from outside the viewport into the viewport, thus achieving a display transition animation.

[0089] In some embodiments, changes in the `transform` property value are recognized by the browser as style changes requiring transition after reflow. Combined with the preset `transition` property, the browser automatically calculates intermediate frames to achieve a smooth slide-in animation of the element from outside the viewport to inside. This animates the element, improving the user experience, and the animation process is smooth and meets visual expectations.

[0090] S105: When it is necessary to hide the target element, modify the transform property of the target element to make the target element transition from inside the viewport to outside the viewport, start the hide transition animation, and bind a transitionend event listener to the target element to detect when the animation ends.

[0091] In some embodiments, when the hide operation is triggered, the `transform` property value is first modified to the target value for the slideout, such as `translateX(-100%)` for a left slideout. A `transitionend` event listener function is defined and bound to the target element using the `addEventListener` method, with the event capture mode set to `false`. This way, while starting the slideout animation, preparations are made for ending the animation, ensuring the element is hidden only after the animation is complete, thus preventing animation interruption.

[0092] S106: In the bound transitionend event listener, check whether the target that triggered the event is the target element in step S101.

[0093] In some embodiments, the `transitionend` event bubbles, a feature that can cause some edge cases in practical applications. In the DOM tree structure, event bubbling propagates from child elements to ancestor elements. If the `.drawer` element contains child elements with transition effects, and the child element's transition effect completes before the `.drawer` element, the `transitionend` event listener bound to the `.drawer` element will trigger prematurely due to event bubbling, which is undesirable. To avoid this problem, you can check in the event listener whether the target element triggering the `transitionend` event is `.drawer`. Only if the target element is `.drawer` should the corresponding processing logic be executed.

[0094] In this way, by determining the relationship between the triggering element and the target element, misjudgments caused by child element-triggered events can be eliminated, ensuring that only the transition end event of the target element itself is responded to. This ensures that the processing logic of the transitionend event is only executed when the transition effect of the .drawer element itself is complete.

[0095] S107: After confirming that the transition animation has ended, add the hidden attribute to the target element to remove it from the document flow, and clear the transitionend event listener bound in step S105 and the existing timer used for delayed hiding during the display operation.

[0096] In some embodiments, clearing the timer prevents the hiding operation from being performed before the animation ends, adding the hidden attribute removes the element from the document flow, removing the listener avoids memory leaks, and resetting the state variables to prepare for the next operation. This ensures that the element is completely hidden after the animation completes, and cleans up related resources and state, guaranteeing the integrity of the entire process and the correctness of the next operation.

[0097] In one embodiment of the present invention, based on step S101, the following is a possible embodiment and its specific implementation will be described in a non-limiting manner. S101 specifically includes the following steps:

[0098] Step S1011: Define the transform property of the target element through CSS rules, and use the translation functions translateX, translateY, and translateZ to move the element outside the viewport.

[0099] In some embodiments, the `transform` property is applied via CSS stylesheets or inline styles, with displacement values ​​based on percentages or pixels, ensuring that the element's initial position is outside the viewport. The browser's rendering engine calculates the element's visual position without affecting the document flow layout.

[0100] Step S1012: Add the hidden attribute directly to the HTML tag of the target element, or dynamically set the hidden attribute through JavaScript to make the element initially invisible and not occupy document flow space.

[0101] In some embodiments, the `hidden` attribute is set via HTML or JavaScript when an element is initialized, and the browser automatically handles the element's visibility and document flow occupancy based on the attribute value. This triggers a browser render tree update, removing the element from the accessibility tree and layout tree.

[0102] Step S1013: Set the transition property for the target element using CSS rules, specify the transform property as the transition target, and define the transition duration and easing function to ensure that subsequent property changes can trigger smooth animation.

[0103] In some embodiments, the browser calculates intermediate frames when attributes change and generates smooth animations by interpolating according to a time function. Predefined transition rules ensure that animations are automatically triggered when element states change, improving the user experience; easing functions allow for customized animation rhythms, making the effects more natural, and support for various attribute transitions, enhancing the method's versatility.

[0104] Step S1014: Use JavaScript to create a state management function that records the element's current transform value and hidden state when the element is initialized, and provides a basis for subsequent dynamic operations.

[0105] In some embodiments, a JavaScript function is created to initialize state variables when the page loads, recording the initial transform value and hidden state of the element. This stores the state through objects or variables, and allows for querying and updating of these states in subsequent operations to ensure consistency.

[0106] Step S1015: Initialize via JavaScript event listener, pre-bind the transitionend event listener to the target element and set it to an inactive state so that it can be activated as needed in subsequent show or hide operations.

[0107] In some embodiments, a transitionend event listener is added to the element in JavaScript, but initially set to do nothing and serve only as a placeholder. Instead, the DOM event system's bubbling mechanism is utilized to filter irrelevant events through event target inspection. This reduces the overhead of runtime dynamic binding, improves responsiveness, and enhances the method's robustness.

[0108] In one embodiment of the present invention, based on step S103, the following is a possible embodiment and its specific implementation will be described in a non-limiting manner. S103 specifically includes the following steps:

[0109] Step S1031: Confirm that the hidden attribute of the target element has been completely removed by using JavaScript's attribute inspection method. Specifically, call the element's hasAttribute method, and determine that the removal is complete when the return value is false.

[0110] In some embodiments, the hasAttribute method is called immediately after the JavaScript code that removes the hidden attribute is executed to avoid state delays caused by asynchronous operations.

[0111] Step S1032: Select at least one attribute from the preset rearrangement trigger attribute set. The rearrangement trigger attribute set includes offsetWidth, clientHeight, offsetHeight, clientWidth, and getBoundingClientRect() method. Select the appropriate attribute based on the layout characteristics of the target element.

[0112] In some embodiments, `offsetHeight` is preferred for block-level elements, `clientWidth` is preferred for inline elements, and `getBoundingClientRect()` is selected for scenarios requiring precise position information. Attribute adaptation improves the success rate of reflow and avoids reflow failures due to different element types.

[0113] Step S1033: Read the attribute value selected in step S1032 through JavaScript code, specifically by directly accessing the corresponding attribute of the element or calling the corresponding method.

[0114] In some embodiments, the JavaScript engine interacts with the browser rendering engine, and read operations need to be executed synchronously to avoid being wrapped by asynchronous code and to ensure that the operation is triggered immediately after the hidden property is removed.

[0115] Step S1034: After obtaining the attribute value read in step S1033, store it in a temporary variable. This temporary variable is only used to trigger the reordering and does not participate in subsequent business logic calculations.

[0116] In some embodiments, temporary variables must be declared as local variables, with their scope limited to the reordering logic to avoid polluting the global environment. The variable storage operation itself does not affect the reordering; a complete read-store process ensures the browser completes the reordering calculation, guaranteeing that the reordering operation is effectively triggered.

[0117] Step S1035: If the attribute reading in step S1033 does not trigger a reordering, select other attributes from the set in step S1032 and repeat step S1033, repeating a maximum of 3 times.

[0118] In some embodiments, the retry interval is set to 0ms to avoid introducing latency that could impact user experience. Some browsers may optimize for continuously reading the same attribute; switching attributes can bypass this optimization mechanism and ensure that reordering is triggered.

[0119] Step S1036: After the reflow operation is completed, mark the document as reformatted by setting a boolean status variable to true.

[0120] In some embodiments, the state variable needs to be checked before step S104 is executed, and the transform property is only allowed to be modified if the state is true. The execution order of the reordering and subsequent style modifications is synchronized by the state flag, ensuring that style modifications are performed after the reordering is complete.

[0121] In one embodiment of the present invention, based on step S104, the following is a possible embodiment and its specific implementation will be described in a non-limiting manner. S104 specifically includes the following steps:

[0122] Step S1041: Determine whether the document has been reformatted by reading the set status variable isReflowCompleted. If the status variable value is true, perform subsequent operations.

[0123] In some embodiments, an immediate check is performed after step S1036 is completed to ensure the sequential consistency of reflow and style modification. The execution phases of reflow and transition animation are synchronized through state variables, and the transform property is only allowed to be modified after the reflow is complete.

[0124] Step S1042: Select the target value corresponding to the initial offset direction of the target element from the preset set of transform target values.

[0125] In some embodiments, the target value must be on the same coordinate axis as the initial transform attribute set in step S1012. A preset direction correspondence rule ensures that the transform attribute smoothly transitions from its initial hidden position to a visible position within the viewport.

[0126] Step S1043: Call the window.requestAnimationFrame() method to perform the transform property modification operation before the browser redraws, and assign the target value selected in step S1042 to the style.transform property of the target element.

[0127] In some embodiments, the callback function only modifies the transform property and does not include other time-consuming operations to avoid blocking the animation. requestAnimationFrame adds the property modification operation to the browser's animation frame queue, ensuring that it is executed within the repaint cycle, so that style changes are synchronized with the browser's rendering rhythm.

[0128] Step S1044: Bind a transitionstart event listener to the target element to monitor whether the CSS transition animation has started.

[0129] In some embodiments, event listeners need to be bound before the transform property is modified to ensure that no events are missed. When the browser starts executing the transition animation, the transitionstart event is triggered to confirm that the animation has started normally.

[0130] Step S1045: If the transitionstart event is not triggered within the preset time threshold, the transform property modification operation in step S1043 will be re-executed, with a maximum of 3 retries.

[0131] In some embodiments, the requestAnimationFrame method is still used during retries to maintain synchronization with the browser's rendering rhythm. For animation startup delays caused by optimization strategies in some browsers, retries are used to force the triggering of transition effects.

[0132] Step S1046: When the transitionstart event is triggered, remove the event listener and set the display state variable of the target element to true.

[0133] In some embodiments, the display state variable needs to be read during subsequent hide operations to determine whether the element is currently in a displayed state. Updating the state variable records the dynamic state of the element, providing a basis for determining whether the show button is clicked repeatedly. This avoids repeatedly executing the display animation and ensures consistency in the operation logic.

[0134] In one embodiment of the present invention, based on step S105, the following is a possible embodiment and its specific implementation will be described in a non-limiting manner. S105 specifically includes the following steps:

[0135] Step S1051: Read the set display status variable isShowing. When the display status variable is true, perform subsequent hiding-related operations; if it is false, terminate the current process.

[0136] In some embodiments, a state check is performed immediately after the hide operation is triggered to avoid repeating the operation while the element is already hidden. By reading the previously set isShowing variable, it is confirmed that the element is currently in a hideable display state, ensuring the rationality of the operation.

[0137] Step S1052: Determine the target transform value when sliding out based on the initial transform offset direction of the target element in step S1012.

[0138] In some embodiments, the offset coordinate axis and offset direction of the initial transform in step S1012 are matched to ensure that the slide-out animation path is consistent with the initial hidden position. By using a preset direction correspondence rule, the transform property transitions from the visible position in the viewport to the initial hidden position, forming a natural slide-out trajectory.

[0139] Step S1053: Call the window.requestAnimationFrame() method to assign the transform target value determined in step S1052 to the style.transform property of the target element during the next browser repaint cycle.

[0140] In some embodiments, the `transform` property modification operation is executed within the callback function of `requestAnimationFrame`, and the callback function only contains the property modification without any other time-consuming logic. `requestAnimationFrame` synchronizes the property modification operation with the browser's repaint cycle to ensure that style changes are synchronized with the browser's rendering rhythm.

[0141] Step S1054: Define the transitionend event listener function handleTransitionEnd. This function contains the state handling logic after the transition ends, and assigns the function to a preset global or module scope variable.

[0142] In some embodiments, the handleTransitionEnd function must include basic logic frameworks such as event target verification and listener removal, and the function must be bound to a global / module scope variable to prevent the function from being garbage collected.

[0143] Step S1055: Bind the transitionend event to the target element using the addEventListener() method, specify the handleTransitionEnd event handler as defined in step S1054, and set the event capture mode to false.

[0144] In some embodiments, the third parameter of addEventListener is set to false to match the event target verification logic in step S106, and the binding must be completed before the transform property is modified to ensure that no transition end event is missed.

[0145] When the transition animation of the target element is complete, the browser will trigger the transitionend event. This event can be captured by the bound listener function to provide a basis for determining the timing of subsequent hidden operations.

[0146] Step S1056: Modify the display status variable isShowing set in step S1046 to false, and define the timer identifier variable hideTimer and initialize it to null, which will be used to store the timer ID of the delay hiding later.

[0147] In some embodiments, the modification of the isShowing variable must be performed synchronously with the modification of the transform property, and the initialization of hideTimer to null must be completed before the timer is set. Updating the isShowing variable to false synchronously records the state of the element entering the hiding process; initializing hideTimer to null prepares for setting the setTimeout timer and storing its ID in subsequent steps, ensuring the consistency of the timer management logic.

[0148] In one embodiment of the present invention, based on step S106, the following is a possible embodiment and its specific implementation will be described in a non-limiting manner. S106 specifically includes the following steps:

[0149] Step S1061: In the handleTransitionEnd event listener function defined in step S1054, the browser automatically passes an Event object, which contains information related to the current transition event.

[0150] In some embodiments, when the transitionend event is triggered, the browser creates an Event object containing the triggering element, event type, etc., and passes it as an argument to the bound listener function.

[0151] Step S1062: Extract the target attribute value from the Event object obtained in step S1061. This attribute value points to the actual DOM element that triggered the transitionend event, i.e., the event origin element.

[0152] In some embodiments, during event bubbling, target is always fixed to the element that initially triggered the event, while currentTarget changes dynamically as the event propagates, always being the element currently handling the event. The true origin of the event can be located through target.

[0153] Step S1063: Re-obtain the target element using the DOM selector used in step S1011, ensuring that the obtained element is the latest reference to the target element in the current DOM tree.

[0154] In some embodiments, the same selector as in step S1011 is used, and the element references must be obtained in real time within the listener function, rather than reusing the element references stored in step S1011, to avoid the references becoming invalid after DOM structure updates, such as when elements are re-rendered. By querying using a standard DOM selector, the latest element in the current DOM tree that meets the conditions can be obtained, ensuring that the reference is the target element that currently exists and has not been replaced.

[0155] Step S1064: Use the equality operator to compare the target element extracted in step S1062 with the target element re-acquired in step S1063 to determine whether they are the same DOM element.

[0156] In some embodiments, each DOM element is a unique object in memory. Different elements, even those with the same structure and class name but different reference addresses, can be directly determined whether `target` is the target element itself using the equality operator. This directly confirms whether the event was triggered by the target element itself, with simple logic and high accuracy.

[0157] Step S1065: If the comparison result of step S1064 is false, that is, target is not the target element, call the contains() method of the target element obtained in step S1063, pass the target element as a parameter, and determine whether target is a descendant element of the target element.

[0158] In some embodiments, the parameter of the contains() method must be the target element extracted in step S1062, and it must be ensured that the target element obtained in step S1063 is not null to avoid throwing an error when calling the method. The existence check of the target element can be added in advance.

[0159] It should be noted that if the parameter element is a child element of the current element, it returns true; otherwise, it returns false. This can be used to determine whether the event triggering source is within the DOM subtree of the target element.

[0160] Step S1066: Based on the comparison result of step S1064 and the return value of the contains() method in step S1065, define a boolean variable isTargetValid: when the result of step S1064 is true, isTargetValid is set to true; when the result of step S1064 is false and the result of step S1065 is true, isTargetValid is set to false; otherwise, isTargetValid is set to false.

[0161] In some embodiments, the assignment logic of isTargetValid follows the rule of being true only when the target element itself is triggered. Even if target is a child element, it is set to false to ensure that only the transition end event of the target element itself is processed subsequently.

[0162] As can be seen, integrating the direct matching result of step S1064 and the child element judgment result of step S1065 into a single boolean variable transforms the complex DOM relationship judgment into a simple state marker. This simplifies subsequent business logic and reduces code complexity.

[0163] In one embodiment of the present invention, based on step S107, the following is a possible embodiment and its specific implementation will be described in a non-limiting manner. S107 specifically includes the following steps:

[0164] Step S1071: In the transitionend event callback function, the event trigger source is verified by comparing event.target with the pre-stored target element node reference.

[0165] In some embodiments, the DOM event bubbling mechanism can be utilized to compare and filter child element transition events, ensuring that only the transition of the target element itself is processed. This improves the reliability of the solution in complex DOM structures and enhances its scalability.

[0166] Step S1072: If the verification passes, call the setAttribute method of the target element and set the hidden attribute to an empty string.

[0167] In some embodiments, setting the `hidden` property causes the browser to automatically remove the element from rendering and from the document flow, without requiring additional styling. This standardizes the implementation of element hiding, avoids hardcoding `display:none`, ensures compatibility with HTML specifications, and improves code maintainability.

[0168] Step S1073: In the function that displays the element, remove the transitionend event listener using the removeEventListener method.

[0169] In some embodiments, the `removeEventListener` method is used in the display operation function, passing in the event type `transitionend` and a stored callback function reference. The event listener is stored as a variable, and its removal requires an exact match to the callback function reference to prevent residual events.

[0170] Step S1074: In the function that displays the element, the timer ID stored in the hideTimer variable is cleared using the clearTimeout function.

[0171] In some embodiments, the timer is cleared by calling clearTimeout in the display operation function. hideTimer stores the ID returned by setTimeout, and terminating any unfinished hiding tasks after clearing it.

[0172] Step S1075: Before displaying the element, set the target element's style.transform property to the initial offset value.

[0173] In some embodiments, the transform is reset to the initial offset, providing a consistent starting point for the next slide-in animation. This eliminates the effects of style residue, ensures animation consistency, and enhances the stability of the solution in multi-scenario applications.

[0174] Step S1076: By reading the hidden attribute value of the target element, confirm that it has been set to true, and ensure that the element is removed from the document flow.

[0175] In some embodiments, attribute reading triggers browser state confirmation to ensure that the hiding operation has taken effect. This hiding state verification method ensures the element is completely removed, improving the reliability of the solution.

[0176] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0177] The following are embodiments of the Web element transition and document flow control system provided in this disclosure. This system and the Web element transition and document flow control methods in the above embodiments belong to the same inventive concept. For details not described in detail in the embodiments of the Web element transition and document flow control system, please refer to the embodiments of the Web element transition and document flow control methods described above.

[0178] like Figure 2 As shown, the system includes:

[0179] The initial state configuration module 201 is used to configure the initial state of the target element, enabling it to have visual hiding based on transform and document flow removal state based on the hidden attribute.

[0180] The display attribute removal module 202 is used to remove the hidden attribute when displaying a target element, allowing the target element to enter the document flow;

[0181] The Forced Reformatting module 203 is used to force a document to be reformatted after the hidden attribute is removed by reading the offsetWidth or clientHeight attribute of the target element.

[0182] Display animation implementation module 204, based on the rearranged state, modifies the transform property of the target element, causing it to slide from outside the viewport into the viewport, thus achieving a display transition animation;

[0183] The Hide Animation Startup Module 205 is used to modify the transform property of the target element when it needs to be hidden, so that the target element transitions from inside the viewport to outside the viewport, starts the hide transition animation, and binds a transitionend event listener to the target element to detect when the animation ends.

[0184] The animation target check module 206 is used to check whether the target of the event is the target element in the bound transitionend event listener;

[0185] The hidden processing module 207 is used to add the hidden property to the target element after the confirmed transition animation ends, so that it is removed from the document flow, and to clear the bound transitionend event listeners and existing timers used for delayed hiding during the display operation.

[0186] like Figure 3 As shown, this application also provides an electronic device, including a display module 103, a memory 102, a processor 101, and a computer program stored in the memory and executable on the processor 101. When the processor 101 executes the program, it implements the steps of a Web element transition and document flow control method.

[0187] In embodiments of the present invention, electronic devices include, but are not limited to, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. Electronic devices may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the embodiments described and / or claimed herein.

[0188] In this embodiment, processor 101 may be implemented using at least one of an application-specific integrated circuit, a programmable logic device, a field-programmable gate array, a processor, a controller, a microcontroller, a microprocessor, or an electronic unit designed to perform the functions described herein. In some cases, such an implementation may be implemented within a controller. For software implementation, implementations such as processes or functions may be implemented with separate software modules that allow the performance of at least one function or operation. Software code may be implemented by a software application (or program) written in any suitable programming language, and the software code may be stored in memory and executed by the controller.

[0189] The display module 103 is used to display information input by the user or information provided to the user. The display module 103 may include a display panel, which may be configured in the form of a liquid crystal display, an organic light-emitting diode, or the like.

[0190] The memory 102 can be used to store software programs and various data. The memory 102 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0191] This application also provides a storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the Web element transition and document flow control method.

[0192] The storage medium may be 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 (a non-exhaustive list) of readable storage media include: electrical connections having 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.

[0193] The storage medium stores a program product capable of implementing the methods described above in this specification. In some possible implementations, various aspects of this disclosure can also be implemented as a program product comprising program code that, when run on a terminal device, causes the terminal device to perform the steps described in the exemplary methods section of this specification according to various exemplary embodiments of this disclosure.

[0194] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for Web element transition and document flow control, characterized in that the method... include: S101: Configure the initial state of the target element, enabling it to have visual hiding based on transform and document flow removal based on the hidden attribute; S102: When displaying the target element, remove the hidden attribute to allow the target element to enter the document flow; S103: After removing the hidden attribute, force the document to be reformatted by reading the offsetWidth or clientHeight attribute of the target element; S104: Based on the rearranged state, modify the transform property of the target element to make it slide from outside the viewport into the viewport, thus achieving a display transition animation; S105: When it is necessary to hide the target element, modify the transform property of the target element to make the target element transition from inside the viewport to outside the viewport, start the hide transition animation, and bind a transitionend event listener to the target element to detect the timing when the animation ends. S106: In the bound transitionend event listener, check whether the target that triggered the event is the target element in step S101; S107: After confirming that the transition animation has ended, add the hidden attribute to the target element to remove it from the document flow, and clear the transitionend event listener bound in step S105 and the existing timer used for delayed hiding during the display operation.

2. The Web element transition and document flow control method according to claim 1, characterized in that, S101 specifically includes the following steps: S1011: Define the transform property of the target element through CSS rules, and use the translation functions translateX, translateY, and translateZ to move the element outside the viewport; S1012: Add the hidden attribute directly to the HTML tag of the target element, or dynamically set the hidden attribute through JavaScript to make the element initially invisible and not occupy document flow space. S1013: Set the transition property for the target element using CSS rules, specify the transform property as the transition target, and define the transition duration and easing function to ensure that subsequent property changes can trigger smooth animation; S1014: Use JavaScript to create a state management function that records the current transform value and hidden state of an element when it is initialized; S1015: Initializes via JavaScript event listener, pre-binds a transitionend event listener to the target element, and sets it to an inactive state.

3. The Web element transition and document flow control method according to claim 1, characterized in that, S103 specifically includes the following steps: S1031: Confirm that the hidden attribute of the target element has been completely removed using JavaScript's attribute inspection methods; S1032: Select at least one attribute from the preset set of rearrangement trigger attributes, and select the appropriate attribute based on the layout characteristics of the target element; S1033: Read the attribute value selected in step S1032 using JavaScript code; S1034: After obtaining the attribute value read in step S1033, store it in a temporary variable; S1035: If the attribute reading in step S1033 does not trigger reordering, then select other attributes from the set in step S1032 and repeat step S1033. S1036: After the reflow operation is completed, mark the document as reformatted by setting a boolean status variable to true.

4. The Web element transition and document flow control method according to claim 1, characterized in that, S104 specifically includes the following steps: S1041: By reading the set status variable isReflowCompleted, determine whether the document has been reformatted. If the status variable value is true, execute subsequent operations. S1042: Select the target value corresponding to the initial offset direction of the target element from the preset set of transform target values; S1043: Call the window.requestAnimationFrame() method to perform the transform property modification operation before the browser redraws next time, and assign the target value selected in step S1042 to the style.transform property of the target element; S1044: Bind a transitionstart event listener to the target element to detect whether the CSS transition animation has started executing; S1045: If the transitionstart event is not triggered within the preset time threshold, the transform property modification operation in step S1043 will be re-executed; S1046: When the transitionstart event is triggered, remove the event listener and set the display state variable of the target element to true.

5. The Web element transition and document flow control method according to claim 1, characterized in that, S105 specifically includes the following steps: S1051: Read the set display status variable isShowing. When the display status variable is true, perform subsequent hiding-related operations. If false, the current process is terminated; S1052: Determine the target transform value at the time of sliding out based on the initial transform offset direction of the target element; S1053: Call the window.requestAnimationFrame() method to assign the transform target value determined in step S1052 to the style.transform property of the target element during the next browser repaint cycle; S1054: Define the transitionend event listener function handleTransitionEnd, which contains the state handling logic after the transition ends, and assign the function to a preset global or module scope variable; S1055: Bind the transitionend event to the target element using the addEventListener() method, specify the handleTransitionEnd event handler as defined in step S1054, and set the event capture mode to false; S1056: Modify the set display status variable isShowing to false, define the timer flag variable hideTimer and initialize it to null.

6. The Web element transition and document flow control method according to claim 1, characterized in that, S106 specifically includes the following steps: S1061: Based on the defined handleTransitionEnd event listener function, it receives an Event object passed by the browser. The Event object contains information related to the current transition event. S1062: Extract the target property value from the obtained Event object. The property value points to the actual DOM element that triggered the transitionend event, i.e., the element from which the event originated. S1063: By re-fetching the target element using the previously used DOM selector, it is ensured that the latest target element reference in the current DOM tree is obtained; S1064: Using the equality operator, compare the target element extracted in step S1062 with the target element re-acquired in step S1063 to determine whether they are the same DOM element. S1065: If the comparison result of step S1064 is false, that is, target is not the target element, call the contains() method of the target element obtained in step S1063, pass the target element as a parameter, and determine whether target is a descendant element of the target element. S1066: Based on the comparison result of step S1064 and the return value of the contains() method in step S1065, define a boolean variable isTargetValid: when the result of step S1064 is true, isTargetValid is set to true; when the result of step S1064 is false and the result of step S1065 is true, isTargetValid is set to false; otherwise, isTargetValid is set to false.

7. The Web element transition and document flow control method according to claim 1, characterized in that, S107 specifically includes the following steps: In the transitionend event callback function, the event trigger source is verified by comparing event.target with the pre-stored target element node reference. If the verification passes, call the setAttribute method of the target element and set the hidden attribute to an empty string; In the function that displays the element, remove the transitionend event listener using the removeEventListener method; In the function that displays the element, the timer ID stored in the hideTimer variable is cleared using the clearTimeout function; Before displaying the element, set the target element's style.transform property to the initial offset value; The current state can be confirmed by reading the hidden attribute value of the target element.

8. A Web element transition and document flow control system, characterized in that, The system is used to implement the Web element transition and document flow control method as described in any one of claims 1 to 7; the system includes: The initial state configuration module is used to configure the initial state of the target element, enabling it to have visual hiding based on transform and document flow removal based on the hidden attribute. The hidden attribute removal module is used to remove the hidden attribute when a target element is displayed, allowing the target element to enter the document flow. The Force Re-format module is used to force a document to be re-formatted after the hidden attribute is removed by reading the offsetWidth or clientHeight attribute of the target element. The display animation module modifies the transform property of the target element based on the rearranged state, causing it to slide from outside the viewport into the viewport, thus achieving a display transition animation. The Hide Animation Start-up Module is used to modify the transform property of a target element when it needs to be hidden, so that the target element transitions from inside the viewport to outside the viewport and starts a hide transition animation. A transitionend event listener is bound to the target element to detect when the animation ends. The animation target check module is used to check whether the target of the event that triggered the event is the target element in the bound transitionend event listener; The hidden handling module is used to add the hidden property to the target element after the transition animation has ended, so that it is removed from the document flow, and to clear the bound transitionend event listeners and existing timers used for delayed hiding when the display operation is performed.

9. An electronic 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 program, it implements the steps of the Web element transition and document flow control method as described in any one of claims 1 to 7.

10. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the Web element transition and document flow control method as described in any one of claims 1 to 7.

Images