Is adding a property to a div using the Jquery Css Function taking longer than expected?

I am attempting to scale a div when another is clicked, with the scaling origin starting from where the click occurred. This is similar to Apple's behavior when you open an app and it expands from where you clicked.

However, I'm facing an issue where setting the property of the scale origin has no effect when clicking on the div directly. It only works when I include a timeout function that applies the class for full scaling.

The situation when the class is added before CSS is applied:

var xPosSTR = 30+'px';
var yPosSTR = 30+'px';

$('.box-detail').css({
    'transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px',
    '-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
});

$(".box-detail").addClass("box-reveal-prop");

When the class is applied with a delay (scaling from the specified origin but taking time):

var xPosSTR = 30+'px';
var yPosSTR = 30+'px';

$('.box-detail').css({
    'transform-origin':         '' + xPosSTR + ' ' + yPosSTR + ' 0px',
    '-webkit-transform-origin': '' + xPosSTR + ' ' + yPosSTR + ' 0px'
});
setTimeout(function(){
    $(".box-detail").addClass("box-reveal-prop");
}, 2000);

CSS styles:

.box-detail {
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 100%;
    transition: 0.3s;
    z-index: 1000;
    transform:scale(0,0);
}

.box-reveal-prop {
    transform:scale(1,1);
}

Is there a way to achieve this without using a timeout function? Thank you!

Answer №1

To trigger the event after a transition, you should listen for transitionend

$('.box-detail')
  .on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
        function(){  
          $(".box-detail").addClass("box-reveal-prop"); 
 });

You can view the JavaScript demonstration on this JSFiddle link

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

What is the reason this :class="{}" is not functioning properly in Vue.js?

I have created a simple file that contains a reactive Array of objects where each object has a property called "checked" which is a boolean that toggles based on a checkbox. I am using a v-for directive to iterate through the array of employees and render ...

Tips for organizing Protractor promises

I am currently experimenting with determining if an element is positioned at the bottom of a page in Protractor/Webdriver using promises. However, I feel like my current approach is quite messy and there must be a cleaner way to achieve this. describe(&ap ...

Adjusting the dimensions of the image carousel

Here is my code for an Image carousel: <div class="container"> <div class="row"> <div class="col-md-12 col-md-offset-0"> <div id="imageCarousel" class="carousel slide" data-interval="4000" data ...

Is there a way to incorporate a <u> tag into an inline angular variable in HTML that has been generated by a ternary expression?

Currently, I have the following scenario. <label> Make {{$ctrl.tcTemplate.isLibrary ? $ctrl.tcTemplate.name : "this item"}} a Library item: <toggle ng-change="changed(); $ctrl.eraseName();" ng-model="$ctrl.tcTemplate.isLibrary;" off="Fals ...

Event fails to trigger when attached to different elements

Currently, I have an onchange event linked to the input text box and an onclick event attached to a text link. Interestingly, when I click on the link after editing the textbox, the click event does not trigger - instead, the change event is fired. If you ...

Switch between two fields using just one animation

I've been experimenting with creating an information tag that slides out from behind a circular picture. To achieve this effect, I created a block and circle to serve as the information field placed behind the image. However, I'm facing a challe ...

Creating dynamic stripes on MUI LinearProgress for lively animations

I'm looking to add animation to MUI LinearProgress. I have the animation keyframes code, but I'm not sure how to implement the stripes effect. Any advice would be appreciated. Here is the code snippet I have: import React, { FunctionComponent } ...

Restrict the amount of decimal places allowed in input text

Another question on Stack Overflow addresses limiting the number of characters allowed in a form input field. I am specifically looking to restrict the number of digits that can come after the decimal point to 2 digits. <input type="text" maxlength="2 ...

Firefox consistently reports ajax status as error

One of my ajax requests is causing some confusion. $.ajax({ url: webURL, type: 'post', data: somedata, cache: false, datatype: "json", contentType: "application/json", success: successFunc, ...

What is the reason for the index.html file not connecting to the local .css files and .js file?

I'm currently using node.js to send an .html file that includes the following tags: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This is my personal profile website" /> <link r ...

Disabling iframe javascript timers when iframe is no longer in the user's view

Currently, I am working on a blog post that will showcase various HTML5/Javascript animations through multiple <iframe> sections. These animations utilize methods such as requestAnimationFrame() and/or setInterval(). Due to limitations within the blo ...

Ways to eliminate an item from an array when the value of the object is not present

I am facing an issue with removing objects from an array that do not contain the data object. I have attempted to use the filter method but have not been successful. results.filter(obj => obj.data === undefined) results = [ {id: 1, location: 'a&a ...

The error encountered is due to an invalid assignment on the left-hand side

I'm encountering the error below: Uncaught ReferenceError: Invalid left-hand side in assignment This is the problematic code: if (!oPrismaticMaterial = "") { for (var i = 0; i < oPrismaticMaterial.length; i++) { if (oPrismaticMater ...

"Unlock the power of Angular.js: Extracting table row data with the click of a checkbox

Can anyone help me with this? I am trying to retrieve all checked data from a table row using Angular.js. Below is my code: <tr ng-repeat="gl in galleryDatas"> <td><input type="checkbox" name=""> {{$index+1}}</td> <td><img ...

Struggling to display filtered content in React using State

As a newcomer to React, I am working on a todo list that shows both current and completed tasks using LocalStorage. Each task has a boolean property called "active" which is toggled when a user clicks on the task checkbox. I have a filter in place to separ ...

The VLC WebPlugin puts a halt on websocket activity during playback

I currently have a basic HTML/JS application that includes an embedded VLC WebPlugin and several methods for play/pause functionality. This application is being managed by another JavaScript file through a straightforward server/websocket C# setup. The con ...

What is the best way to add spacing between the fields within a Bootstrap 4 form row that spans across 2 rows when viewed on small displays?

Trying to create a bootstrap 4 form with fields in one row for larger screens and two rows for smaller screens. The attempt was made using the following code: <div class="form-group row"> <label class="col-sm-2 col-form-label">File:</lab ...

The route function is not being executed

I'm currently developing a straightforward restaurant web application that utilizes a mongo-db database to manage the menu items. The problem lies with my client js file, which is supposed to utilize a routing function to access the database and retri ...

Rendering in React that is dependent on whether or not the IconButton component from Material UI has been clicked

import "./styles.css"; import React, { useState } from "react"; import { IconButton } from "@material-ui/core"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; export default function App() { const [ex ...

Is there a way to incorporate jQuery into SharePoint 2010?

I am encountering an issue with linking my HTML page to our organization's SharePoint 2010 portal. All necessary files (CSS, images, jQuery) are stored in the same document library. While the CSS is functioning properly, I am facing challenges with ge ...