Why is my JavaScript transition not functioning properly?

I am facing an issue where I am trying to add transition duration to the changes made on a button. Below is the code I am using:

ingenieriaInd.addEventListener('click',(e)=>{
  
  ingenieriaInd.style.transition = 'all 500ms ease-in-out';
  ingenieriaInd.style.width = '90vw';
  ingenieriaInd.style.height = '80vh';
  ingenieriaInd.style.position = 'absolute';
  ingenieriaInd.style.justifyContent = 'flex-start';
  ingenieriaInd.style.top = '5vh';
  ingenieriaInd.style.left = '-15vw';

})

All the changes are taking effect except for the transition.

I want the changes I make to have a smooth transition effect.

javascriptcssdom

Answer №1

To ensure your element is properly positioned, you must specify starting coordinates:

using only css

#ingenieriaInd {
    width:  0;
    height:  0;
    position:  absolute;
    justify-content: flex-start;
    top:  0;
    left:  0;
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
}


#ingenieriaInd:active {
    width:  90vw;
    height:  80vh;
    position:  absolute;
    justify-content: flex-start;
    top:  5vh;
    left:  -15vw;
}

using both css and js

css

#ingenieriaInd {
    width:  0;
    height:  0;
    position:  absolute;
    justify-content: flex-start;
    top:  0;
    left:  0;
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
}

js

ingenieriaInd = document.getElementById("ingenieriaInd")

ingenieriaInd.addEventListener('click',(e)=>{
    ingenieriaInd.style.width = '90vw';
    ingenieriaInd.style.height = '80vh';
    ingenieriaInd.style.position = 'absolute';
    ingenieriaInd.style.justifyContent = 'flex-start';
    ingenieriaInd.style.top = '5vh';
    ingenieriaInd.style.left = '-15vw';

})

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

"Utilizing Javascript to create a matrix from a pair of object arrays

Attempting to transform an infinite number of arrays of objects into a matrix. height: [1,3,4,5,6,7] weight: [23,30,40,50,90,100] to 1 23 1 30 1 40 1 50 ... 3 23 3 30 3 40 ... Essentially mapping out all possible combinations into a matrix I experime ...

javascriptarrays

Steps for activating chromedriver logging using the selenium webdriver

Is there a way to activate the chromedriver's extensive logging features from within the selenium webdriver? Despite discovering the appropriate methods loggingTo and enableVerboseLogging, I am struggling to apply them correctly: require('chrom ...

javascriptseleniumselenium-webdriverselenium-chromedriver

Displaying PHP output within a JavaScript expression

Let's dive into a scenario involving a basic HTML document and some JavaScript that's loaded within it: <!-- doc.html --> <!doctype html> <html lang="en"> <head> <script type="text/javascript" src=" ...

phpjavascripthtml

Trouble retrieving data (React-redux)

Greetings! I am currently working on a project involving the Spotify API and attempting to retrieve new releases. While the data is successfully passed down to the reducer, I encounter an issue when calling the fetch action in my App component. When I try ...

javascriptreactjsreduxreact-redux

How can you provide unique css box shadows for various browsers without relying on browser detection?

I have observed that each browser displays box shadow blur radius a bit differently, so I want to ensure consistency across all browsers. However, since they use the unprefixed version, I need to provide different stylesheets for each browser. What is the ...

javascriptcsshtmlstylesheetbrowser-detection

Uploading and previewing multiple images on a canvas

After successfully creating single upload for images and placing them on canvas as seen in http://jsfiddle.net/StJnY/, I am now looking to adapt the script for multiple image uploads. Here is how I plan to modify the script: JS : $(function () { $(&a ...

javascripthtmljqueryjquery-eventsfilereader

Increase the spacing within div columns containing rows of uniform height

Is there a way to add some extra space between the H3-1 div and the H3-2 div? Ideally, I would like to achieve this without using custom CSS, but if necessary, that's okay too. I'd prefer to stick with the col-sm-6 class instead of using col-sm ...

htmlcssbootstrap-4

What are the steps to download files using vuejs?

I need assistance with enabling users to download a file from my website. The variable item.upload_attachment holds the link for the file, such as localhost:8000/media/uploads/poppy.docx. I want to make this link clickable so that users can easily download ...

javascriptvue.js

Using a nested for loop within a React render function

Despite the site suggesting that there are many similar questions, I haven't been able to find the specific answer I'm looking for. I believe this should be an easy task for React pros, but as a beginner, I'm struggling. Currently, I have t ...

javascriptreactjsnested-loops

Puppeteer - Ensuring all network requests are finished before proceeding with page selection

Is it possible to pause a Puppeteer script after performing an action on a page until all network requests are resolved, before moving on to the next action? I have a scenario where I need to use page.select() to interact with a select menu, which trigger ...

javascriptnode.jspuppeteer

The proper way to send an email following an API request

I am currently developing an express API using node.js, and I want to implement a feature where an email is sent after a user creates an account. I have tried various methods, but none of them seem to be the perfect fit for my requirements. Here is some ps ...

javascriptnode.jsapiexpressemail

"Which is better for handling form data: using $.ajax with hidden fields or PHP form

Creating a streamlined admin tool using PHP and JQuery to handle image data management is my current project. The main goal of this utility is to enable an admin to retrieve images from a database, view associated tags for each image, and add new tags as n ...

javascriptphpjqueryhtmlajax

Accordion-inspired animation implemented on an Angular component using a selection of different templates

Currently, I am developing a production app with a card-style layout. All filters (such as date pickers) and visualizers (like tables and charts) are enclosed within a "Card" component. Additionally, there are two child components that inherit from this cl ...

javascriptangularangular-animations

Mastering the art of centering three divs within a larger div using HTML and CSS

I'm having trouble centering three div elements within another div. I attempted to use verticle-align and negative margins, but nothing seems to be working. .float-container { border: 3px solid red; padding: 250px; position: relative; ...

htmlcss

Concealing and revealing template URLs with AngularJS

I am currently working with a dynamic Array in my Controller that contains templates (html files) structured similarly to the example below: $scope.templates = [ { name: 'template1.html', url: 'template1.html'}, { name: ...

javascripthtmlangularjs

Encountered an issue while attempting to set up the grunt

After successfully installing Grunt with the code below: npm install -g grunt-cli I tried to check the version by running grunt --version, which returned: grunt-cli v0.1.13 However, when I navigated to my project directory and ran npm install, a series ...

javascriptnode.jsgruntjs

When the application is converted into static files, the dynamic routes fail to function properly

I have a website that is statically exported but has dynamic routes. During development, the site works fine. However, when I build and export it, then serve the static files using serve, an issue arises. If you go to the site root and click on a link th ...

javascriptreactjsnext.js

What is the best way to conceal a modal using jquery?

Click button to open modal: <button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1">OPEN</button> The modal code: <div class="modal fade text-left" id="inlineForm1" tabindex=" ...

javascriptc#jqueryhtmlasp.net

How can you establish an environmental variable in node.js and subsequently utilize it in the terminal?

Is there a way to dynamically set an environmental variable within a Node.js file execution? I am looking for something like this: process.env['VARIABLE'] = 'value'; Currently, I am running the JS file in terminal using a module whe ...

javascriptnode.jsvariablesenvironment-variables

Error: Unable to iterate through users due to a non-function error while attempting to retrieve the firestore document

I encountered an issue with my code, receiving the error message: TypeError: users.map is not a function. Can anyone help me identify what might be wrong? const [users, setUsers] = useState([]); const getData = async () => { try { const use ...

javascriptreactjsfirebasegoogle-cloud-firestore