Generate an additional CSS animation to display before the next page is loaded

Question

Generate an additional CSS animation to display before the next page is loaded

When loading a page, I am implementing CSS transitions to display animated lines. To activate these lines, I am utilizing a jQuery script to change the class on the line elements.

I am looking to reverse the CSS transitions when transitioning to the next page. Currently, the lines draw up on pageload, but for the next page, I want them to draw out before drawing them in again. This might require using something like AJAX to load pages seamlessly and ensure smooth transitions between pages from the start.

Demo:

HTML:

<html lang="en" class="noTouch">
 <!-- META DATA -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

  ...

</code></pre>

<p>CSS: </p>

<pre><code>.h-line {
 ...
 }

 ...

$(function () {
$('.v-line, .h-line').addClass('ready');
});

javascript jquery html css

Answer 1

Answer №1

If you want to incorporate a seamless transition effect in your website, consider using the transitionend event. This event is triggered when a CSS transition finishes.

To ensure that clicking on a link does not immediately navigate away from the current page, you can prevent the default behavior of the link click event.

//Attach click event listener to <a> elements
$('a').click(function(e){
    //Stop the default navigation behavior
    e.preventDefault(); 

    //Save a reference to the clicked link
    var clickedLink = this;

    $('.v-line, .h-line')
        //Remove CSS classes (consider adding reverse transitions as well)
        .removeClass('ready')

        //Listen for the "transitionend" event.
        .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
            function(e) {
                //Navigate to the clicked link's URL after the transition completes
                document.location.replace(clickedLink.href);
            }
        );
);

If you aim to achieve a smooth transition between pages without fully reloading them, utilizing AJAX technology enables you to update specific content on the page dynamically.

Answer 2

If you want to incorporate a seamless transition effect in your website, consider using the transitionend event. This event is triggered when a CSS transition finishes.

To ensure that clicking on a link does not immediately navigate away from the current page, you can prevent the default behavior of the link click event.

//Attach click event listener to <a> elements
$('a').click(function(e){
    //Stop the default navigation behavior
    e.preventDefault(); 

    //Save a reference to the clicked link
    var clickedLink = this;

    $('.v-line, .h-line')
        //Remove CSS classes (consider adding reverse transitions as well)
        .removeClass('ready')

        //Listen for the "transitionend" event.
        .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
            function(e) {
                //Navigate to the clicked link's URL after the transition completes
                document.location.replace(clickedLink.href);
            }
        );
);

If you aim to achieve a smooth transition between pages without fully reloading them, utilizing AJAX technology enables you to update specific content on the page dynamically.

Answer 3

Answer №2

This particular solution utilizes Event Delegation. Here, JQuery captures the click on the element and then eliminates the CSS class.

By implementing the code below, when the user clicks, the animation will play in reverse and trigger a page change. However, the page alteration may disrupt the animation flow.

Access your page, insert the following code into the browser console, and then click on a link to witness its functionality.

$("body").on("click","a",function( event ){ 
$('.v-line, .h-line').removeClass('ready');});

To ensure that the entire CSS animation finishes before transitioning to another page, incorporating Event Prevent Default might be necessary. This action prevents the original click from proceeding, requiring manual initiation of the event post-animation completion.

Visit your page, input the given code in the browser console, and click on a link to observe it in operation.

Take note that due to the prevention of default behavior, there is no immediate page switch; instead, the animation is granted sufficient time to conclude.

$( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
$('.v-line, .h-line').removeClass('ready');});

Answer 4

This particular solution utilizes Event Delegation. Here, JQuery captures the click on the element and then eliminates the CSS class.

By implementing the code below, when the user clicks, the animation will play in reverse and trigger a page change. However, the page alteration may disrupt the animation flow.

Access your page, insert the following code into the browser console, and then click on a link to witness its functionality.

$("body").on("click","a",function( event ){ 
$('.v-line, .h-line').removeClass('ready');});

To ensure that the entire CSS animation finishes before transitioning to another page, incorporating Event Prevent Default might be necessary. This action prevents the original click from proceeding, requiring manual initiation of the event post-animation completion.

Visit your page, input the given code in the browser console, and click on a link to observe it in operation.

Take note that due to the prevention of default behavior, there is no immediate page switch; instead, the animation is granted sufficient time to conclude.

$( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
$('.v-line, .h-line').removeClass('ready');});

Generate an additional CSS animation to display before the next page is loaded

Answer №1

Answer №2

Similar questions

Is there a way to trigger a modal popup when hovering over a Bootstrap 5 card?

Sending a jQuery variable to an external PHP script

Tips for appending a custom list item to the bottom of the jQuery autocomplete results

"Troubangular: Troubleshooting unexpected behavior when trying to update ngFor after setting a property

Unable to divide using " " in JavaScript

Adjust the line height of the paragraph class using Bootstrap customization

There was a problem retrieving the product information from the API

Is it possible to configure Webpack/NextJs to handle a recurring import path mapping?

Using Ruby variable as a parameter in JavaScript

Observer function simulated by SinonStub

How can I set a default radio button selection when the page is loaded?

What is the process for setting up a redirect to the login page in ASP.NET?

Script for automated functions

Enhance your li items with prev and next buttons using PHP or jQuery

Gracefully Switching Between Various Functions

What steps should I take to successfully implement a div ID selector in an HTML document?

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

What is causing the malfunction in this code? (Regarding the key and value variable objects)

Struggling to access specific data within a JSON object? Wondering how to extract and display data from a JSON object in VUE?

Is there a way to convert inline styling to CSS using Material-ui within a React component?