Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using 

document.querySelector('#mydiv').style.width = '20%'
, I noticed that the new width is updated instantly rather than transitioning smoothly. It seems like I may be overlooking something obvious or misunderstanding how the transition property works. Any advice on how to fix this issue would be greatly appreciated.

setTimeout(function() {
  document.querySelector('#mydiv').style.width = '20%';
}, 500);
#mydiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0.4rem;
  background: orange;
  transition: width 1s ease-out;
}
<div id="mydiv"></div>

javascriptcss

Answer №2

The solution is successful, as I revised the styling of the div causing the transition to not function properly.

After making the necessary adjustments, everything is now functioning correctly.

A big thank you to everyone who helped troubleshoot and identified the problem.

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

Convert the existing JavaScript code to TypeScript in order to resolve the implicit error

I'm currently working on my initial React project using Typescript, but I've hit a snag with the code snippet below. An error message is popping up - Parameter 'name' implicitly has an 'any' type.ts(7006) Here is the complet ...

javascriptnode.jsreactjstypescript

Node.js schedule randomizer

I'm trying to figure out how to call a function within a random range of time intervals in Node.js. What I need is for the function to run once between 2 and 12 hours, then again at another random interval between 2 and 12 hours, and so on. However, I ...

javascriptnode.jslaterjs

Utilizing the state as a condition within the useEffect to update the component

Is there a way to automatically hide the mobile menu when the URL changes in ReactRouter? I have noticed that I get a warning for not tracking mobileOpen as a dependency, but strangely the code still works fine. const Navbar: React.FC<Props> = props ...

javascriptreactjsreact-hooks

Tips on revitalizing a bootstrap wizard

In my JSP file, I am using a Bootstrap wizard. You can see the wizard layout in the following link: The wizard allows me to add employee elements that are stored in a JavaScript array (I also use AngularJS). At the final step of the wizard, there is a su ...

javascriptjqueryangularjsjsp

"Attempting to use a Chrome Extension to apply inline styles is not producing

Despite my attempts to search on Google, I have been unable to find a solution. I am currently working on developing a Chrome extension with the specific goal of changing/inserting the style.display property for one or more elements. This task would norma ...

javascriptgoogle-chromegoogle-chrome-extension

What could be causing my ajax post function to malfunction when triggered by a button click event?

My attempts to send variables to a PHP file via AJAX when a button is clicked have been unsuccessful. Upon checking my PHP page, I noticed that the variables were not being received. $(document).ready(function(){ $("#qryBtn").click(function(){ ...

javascriptphpjqueryajaxformshttp-post

Error message: Icons failing to display in conjunction with template output | 404 error code

I'm trying to display icons based on a search, but I keep getting a 404 error for http://localhost:3000/static when I input a value. My current folder structure looks like this: Root directory > Public > Icons and Root directory > index.js. ...

javascriptexpress

What could be the reason for this code not displaying buttons on separate lines rather than next to each other?

I am struggling to get the Logo to print followed by all buttons lined up side-by-side. I have experimented with different display properties within the first <div> tag such as block, inline-block, and even removing the display property altogether. ...

cssreactjsmaterial-uinext.js

Can Sync blocking IO be implemented solely in JavaScript (Node.js) without the use of C code?

Is JavaScript intentionally designed to discourage or disallow synchronous blocking I/O? What is the reason for the absence of a sleep API in JavaScript? Does it relate to the previous point? Can browsers support more than one thread executing JavaScript? ...

javascriptnode.js

Is there a way to alter the background image of the logo specifically for mobile device viewing?

Here is a snippet of my HTML code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="{{ route('home') }}"> <img src="{{ asset('assets/images/logo-school-icon.png') }}" ...

cssmobilebootstrap-4

Adjust an UpdatePanel with client-side code triggering server-side operations

I am fairly new to asp.net and have been experimenting with it for around a week now. Currently, I have a page that interacts with a web service, continuously checking its progress (shown in an UpdatePanel) until completion. Once the process is completed, ...

javascriptasp.netajaxtreeviewupdatepanel

When using the v-for directive to display all elements of an array, only the information of the clicked array should be listed when using the

I am facing an issue with my array of locations. There are 2 divs in play - one containing the list of locations and the other displaying additional info when a location is clicked. The problem arises when I click on a specific location, let's say Sc ...

javascripthtmlvue.js

Picture is not displaying properly post-rotation

Is there a way to rotate an image by 90 degrees and display it in a Card Component without it covering the text? Currently, I am utilizing Element.io, but encountering issues with the rotated image overlapping the text. The image currently has the followi ...

cssvue.js

Order the results by a predicate chosen by the user and a predefined secondary attribute

Trying to organize a table of results by a user selected criterion and then by a predefined secondary one. For instance, the ng-repeat setup looks like this: <tr ng-repeat="line in model.resultList | orderBy:['-predicate', 'secondary_va ...

javascriptangularjssorting

Implementing popup alert for multiple tabs when Javascript session times out

I have implemented javascript setInterval() to monitor user idle time and display a popup alert prior to automatic logout. However, it seems to be functioning correctly only in single tabs. Here is the code snippet: localStorage.removeItem("idleTimeValue ...

javascriptphptabssetintervalsession-timeout

Oops! Looks like there was a syntax error with the JSON data at position 1. This resulted in a 400

Having issues submitting form data in my Vue app with an express backend API. The endpoint works fine on postman but I keep getting errors like "SyntaxError: Unexpected token g in JSON at position 0" or "400: Bad Request." I've tried using JSON.parse ...

javascriptnode.jsexpressvue.jsaxios

Navigate using React to a different HTML page based on certain conditions

After calling the fetch function, I am able to retrieve the correct token from the backend application. However, every time in this program, even if an incorrect token is retrieved, the program still navigates to StudentLobby (this should only happen when ...

javascripthtmlcssreactjsfrontend

Expecting a declaration statement for exporting React

When attempting to export my component, I encounter an error in my editor stating export declaration statement expected Here is the code snippet: export Header from './Header/Header'; However, if I modify it like this: export {default as Head ...

javascriptreactjs

Utilizing Angular's $locationProvider in conjunction with ASP.NET MVC routing

Currently, I am managing routing in ASP.NET MVC using the RouteCollection class. However, my front end is built with Angular and there are instances where I need to update the URL using Angular's $location service while also supporting HTML5. To achie ...

javascriptasp.net-mvcangularjsasp.net-mvc-5

Positioning a pair of dropdown menus side by side

Could anyone provide guidance on how to position two select boxes side by side within a table cell, ensuring they are responsive at the same time? Any help would be greatly appreciated. Thank you in advance! ...

htmlcss