Animate the transition effect as soon as the block is displayed

Looking to create a smooth page transition using CSS changes with the help of Javascript (jQuery). Initially, one of the pages is set to display none.

page1 = $('.page1');
page2 = $('.page2');

page1.removeClass('animate').css('display', 'block').css('transform','translate3d(0,0,0)');
page2.removeClass('animate').css('display', 'none').css('transform','translate3d(0,0,0)');

Next step involves moving page2 to the right without animation and displaying it.

page2.removeClass('animate')
  .css('display', 'block')  
  .css('transform','translate3d(100px,0,0)');

Following that, an animation on page1 triggers a translation effect.

page2
    .addClass('animate')
    .css('transform','translate3d(0px,0,0)');

A notable issue arises when performing both animations back-to-back, resulting in no animation. However, inserting a brief pause between the two animations resolves this problem.

http://codepen.io/anon/pen/myeopr

javascriptjquerycssanimation

Answer №1

After some experimentation, I managed to solve the issue using setTimeout without any delay.

page2.removeClass('animate')
  .css('display', 'block')  
  .css('transform','translate3d(100px,0,0)');

setTimeout(function() {
  page2
      .addClass('animate')
      .css('transform','translate3d(0px,0,0)');
}, 0)

Although it's a bit of a workaround, it gets the job done...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Expo + tRPC: Oops! Looks like the application context couldn't be retrieved. Don't forget to wrap your App inside the `withTRPC` HoC for

I'm currently working on a straightforward tRPC server setup: // server.ts import { initTRPC } from "@trpc/server"; import { z } from "zod"; const t = initTRPC.create(); export const appRouter = t.router({ greeting: t.procedu ...

javascripttypescriptreact-nativeexpotrpc.io

Creating a tab component using vanilla javascript

I am facing an issue with my tab component in plain JavaScript. The content displays correctly in debug mode, but after compilation, it does not show up on the browser. Additionally, when I select a tab, the 'activeNav' class is applied to indica ...

javascripthtmlcss

What impact does nesting components have on performance and rendering capabilities?

Although this question may appear simple on the surface, it delves into a deeper understanding of the fundamentals of react. This scenario arose during a project discussion with some coworkers: Let's consider a straightforward situation (as illustrat ...

javascriptreactjstypescript

When invoked, a Javascript Object comes back empty

My code snippet: const channels = fauna.paginate(q.Match(q.Index("channels"), "true")) // Query FaunaDB database for channel list => create constant called users containing results const channelList = channels.each(function (page) { ...

javascriptnode.jsfaunadb

Prevent selection based on function in Angular

I'm attempting to prevent certain options from being selected based on a specific method. For instance, let's say I have four options: A B C D In my method (let's use "x" as an example): if(name == A) { disable the selection for option A. ...

javascriptangularhtml-select

Searching for a specific data point within the latest entry of a JSON file using Javascript

I am currently in the process of utilizing a sensor to measure temperature, which is then stored in a mongo database. This data can be accessed as a JSON file by visiting ('/data'). My goal is to determine the latest entry and extract the temper ...

javascriptarraysjsonmongodbparsing

Extremely sluggish pagination in JQGrid following the implementation of a filter through the filter toolbar

I've encountered a problem while using jqGrid with LOAD ONCE and client-side paging. The addition of a filter toolbar has significantly slowed down the paging process after applying any kind of filter. $(gridElement).jqGrid({ postData: post, ...

javascriptjqueryhtmlperformancejqgrid

Commitment of service within AngularJS controller using the "as" syntax

I'm experiencing an issue with the code snippet below. I prefer using the controller as syntax and assigning data to 'this' instead of $scope. The problem is that in this scenario, when using $scope.user everything works fine, but when tryin ...

javascripthtmlangularjs

Exploring the Differences Between Arrays in JavaScript

I am currently tackling the task of comparing arrays in JavaScript, specifically within node.js. Here are the two arrays I am working with: Array 1: [16,31,34,22,64,57,24,74,7,39,72,6,42,41,40,30,10,55,23,32,11,37,4,3,2,52,1,17,50,56,60,65,48,43,58,28,3 ...

javascriptarraysnode.jsexpresslogic

Obtain the title of the text generated by clicking the button using a script function

I am working on a piece of code that generates a text box within a button's onclick function. My goal is to retrieve the name value of each text box using PHP. <script language="javascript"> var i = 1; function changeIt() ...

javascriptphphtml

Setting font sizes using CSS values according to the Shadow DOM root element

Summary of the problem: I am searching for a method to establish font size values based on an element inside a shadow dom relative to the shadow host, regardless of the parent element's font size within the shadow dom. I am looking for a solution sim ...

htmlcssdomweb-component

The size of the cursor varies depending on the line it's placed on

I have a content editable div where three lines are separated by BR tags. When I click on the second line, the cursor becomes bigger than that in the first line. .content { line-height: 35px; } <div class="content" contenteditable="true"> ...

javascriptjqueryhtmlcss

Can Vue.js be configured to reload specific components only?

Can a specific component be reloaded in a Vue component that contains multiple components? For example, if there is a component structured like this: Main component <template> <button>Button<button> <component1></component> ...

javascriptvue.jscomponentsreload

What is the reason behind Angular's continued use of JSON for encoding requests? (specifically in $http and $httpParamSerializerJ

Is there a way to set Angular to automatically send requests as x-www-form-urlencoded instead of JSON by default? Angular version 1.4.5 I've tried the following code snippet but it doesn't seem to work: angular.module('APP').config( ...

javascriptajaxangularjshttp

Is there a way to gather information from a web service and neatly display it within an HTML table?

Is it possible to fetch a JSON array from a web service and save it in a variable? Consider the following table structure: <table id="myTable" border="1"></table> The table is populated using the code below: // JSON array var myData = metho ...

javascripthtmlweb-services

developing an associative object/map in JavaScript

I have a form featuring various groups of checkboxes and I am attempting to gather all the selected values into an array, then pass that data into an Ajax request. $('#accessoriesOptions input').each(function(index, value){ if($(this).prop(& ...

javascriptjqueryajax

Angular's ng-submit directive does not use the most up-to-date scope available

I'm currently learning Angular and have been struggling with a particular issue. I have created a form to edit user details. Upon page load, I make an AJAX call to fetch the data of the selected user and populate the scope with the values. Initially, ...

javascriptangularjsng-submit

Use jQuery to choose specific images, then duplicate the chosen image's "href" attributes

On my webpage, there are several images loaded in a specific format: <a class="something" href="1.html"> <div class="something"> <img alt="name" src="https://www.homepage.com/.1.jpg"/> </div> </a> I am lo ...

jqueryhtml

An issue with jQuery and LESS causing stylesheets to update only once

Struggling with updating a custom CSS href - everything works perfectly the first time, but subsequent updates do not reflect any changes on the page. Even though I can see the href updating in Chrome debugger and there are no errors being thrown by LESS, ...

jquerycssstylesheetlessasp.net-mvc-4

Show a preloader using Jquery after all div elements have been fetched

My goal is to have a preloader displayed in a div, and once another div has finished loading its content, I want the preloader to disappear. Here is an example: <div id="container"> <div id="preloader"> Loading.... </div> ...

jquery