Turning off and on CSS transitions to set the initial position

Is there a way in javascript to position divs with rotations without using transitions initially for an animation that will be triggered later by css transition? I have tried a codepen example which unfortunately does not work on the platform but works fine locally due to window.onload not being considered. Here is the link to my codepen: http://codepen.io/3MO/pen/ZLoKbv

In my approach, I do not set any transition attributes for the divs at first. I transform the divs based on the digit clicked and then add a class to activate the transition properties after this initial positioning.

function onThumbnailClick(event) {
   var index = parseInt(event.target.id.split('-')[1]);

   //initialize the div position without transition :
   initPortraitPanel(index); 
   //then I "activate" the transition :
   $('.portraitDiv').addClass('active-transition'); 
   //After that I want to start transitions...
}      

.active-transition {
      transition: 0.5s;
}

The issue arises when setting the initial positions of the divs taking into account the transition properties even though they are defined after. Can anyone suggest a proper method to disable the transition during the initial positioning and activate it afterwards so that the initial positioning does not use the transition effect?

Your help would be greatly appreciated! Thank you.

Answer №1

Implementing a timeout in the addClass method:

function handleThumbnailClick(event) {
    var position = parseInt(event.target.id.split('-')[1]);

    displaySelectedImage(position);
    $('.imageContainer').setTimeout(addClass('zoom-in'), 50);
}

Check out the code on CodePen

It appears that someone previously provided an answer to this question, which was then downvoted and removed...the reasons remain unclear.

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

The appearance of CSS output is noticeably distinct between iPhones and personal computers

My issue is with the development of my website. When I access it on my PC, everything looks fine. However, when I try to visit the site on my iPhone, there is a noticeable difference in the output. The space above the navigation bar appears differently whe ...

What are the best ways to prioritize custom events over ng-click events?

Recently, I developed a web application using AngularJS. One of the features I included was an input text box with a custom ng-on-blur event handler. Due to some issues with ng-blur, I decided to create my own custom directive called ngOnBlur. Here's ...

Error Detected: the C# script is not compatible with Javascript and is causing

I am facing an issue where I can successfully send information from the database, but I am unable to load the table on the page. When I check the data received with an alert, it appears to be in JSON format, but it still displays the wrong image on the web ...

Error: Attempting to access property of undefined variable

I have searched for similar titles related to my issue, but I still haven't found a solution. The error I am encountering when clicking on agent_dashboard on the side panel is as follows: txtDisplayName = <div style="border:1px solid #990000;paddi ...

How can I personalize the color of a Material UI button?

Having trouble changing button colors in Material UI (v1). Is there a way to adjust the theme to mimic Bootstrap, allowing me to simply use "btn-danger" for red, "btn-success" for green...? I attempted using a custom className, but it's not function ...

What could be causing the issue with the focus not being activated when clicking on the input field in Vue?

I am facing an issue where I have to click twice in order to focus on a specific input field, and I'm having trouble setting the cursor at the end of the input. I attempted to use $refs, but it seems like there may be a deeper underlying problem. Any ...

Having trouble with getting the second JavaScript function to function properly?

I am facing an issue with the second JavaScript function. When I click the 'Send Mail' button, it should call the second function and pass it two values. However, the href line (second last line in the first function) is not rendering correctly. ...

Leveraging ng-transclude and the require attribute for effective communication between directives

I'm working with two directives, let's call them: angular.module('app').directive('directiveX', directiveX); function directiveX(){ return { restrict: 'E', transclude: true, ...

Sustaining the hover effect background color when hovering over submenu options

I am currently working on a navigation menu that includes list items a, b, c, d, e, f. One issue I am facing is when a user hovers over the list item d, the submenu items like d1, d2, d3, d4, and d5 appear within the d section. However, the background col ...

How can I modify the # symbol with .htaccess?

When someone accesses the following URL: www.facebook.com/index.php#sk=inbox The .htaccess file will redirect it to the server as: www.facebook.com/index.php?sk=inbox This allows me to retrieve the value of sk using PHP like this: *echo $_GET[&a ...

Do class bindings with variables need to be inline when using Vue 3?

Consider the following HTML: <template v-for="(child, index) in group"> <div :class="{'border-pink-700 bg-gray-100 ': selected === child.id}"> <div>Container Content</div> </div> & ...

Obtain the bootstrap CSS file

In all my various projects, I have been utilizing Bootstrap 3 and now I am interested in incorporating Bootstrap 4 cards into my work. However, I am struggling to locate the cards in a css format rather than the scss format. I personally don't think ...

Emberjs promises are enhanced with a filtering feature

My goal is to develop a search functionality using a JSON API. After following tutorials and successfully implementing it with provided examples: export default Ember.ArrayController.extend({ searchText: null, searchResults: function(){ ...

Why should one bother with specifying types when defining a variable in Typescript?

As someone new to Typescript, I've come to appreciate its many advantages when working on larger applications and with multiple team members :) Imagine you have the following TypeScript code: declare const num = 5: number; Why is this better than: ...

Top solution for live chat between server and client using jQuery, Java, and PHP on a localhost setup

Seeking recommendations for the best chat solution to facilitate communication between client PCs and a server in my private network. Specifically interested in an Ajax/Java solution similar to the chat support feature found in GMail. ...

A guide on resetting a Nodemon server using code

At the beginning of server start, I have an array of JSON objects that are updated. But if I make changes to the JSON data using NodeJS FS instead of manually editing it, Nodemon does not restart. Is there a way to programmatically restart nodemon? ...

What is the reason skip does not function properly at the start of the aggregation pipeline, yet performs as expected at the conclusion of it?

Initially, the skip stage in this MongoDB database aggregation framework pipeline isn't functioning as expected: [ { $skip: (!offset)? 0 :(offset-1)*limit }, { $match: (query)? query : {} } , { $lookup: ..., ...

What is the method for extracting JavaScript code as data from a script tag?

I have a file external (let's say bar.js) function qux() {} Then in my webpage, I include it using the script tag: <script type="text/javascript" src="bar.js"></script> I am looking for a way to retrieve the JavaScript code from within ...

Adjust the container within the column to match the height of the column in the bootstrap grid

Why is the green container expanding over the blue column when I apply height: 100% or h-100? Is there a way to make it fit just the remaining height of the column? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstra ...

What is the most effective way to transmit multiple pieces of server-side data to JavaScript?

Imagine having multiple Javascript codes embedded in pages. Currently, it's simple to initialize variables by using Print/Echo statements to set JavaScript values. For example: var x = <?php echo('This is a value');?> Initially, I co ...