I need to modify the ng-style attribute multiple times within a JavaScript function

Here is the structure of my HTML:

<nav id="card-set-menu-nav" ng-style="cardSetMenuNavStyle">
...
</nav>

In my Javascript code using AngularJS, I have a function called openCardSetMenu:

$scope.openCardSetMenu = function(cardSet) {
    $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'100%'};
    $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'50%'};
};

I am trying to create a simple side menu by manipulating the $scope.cardSetMenuNavStyle variable.

The HTML element card-set-menu-nav starts at left:100% and then moves to left:50%.

However, I am encountering an issue where the element does not move after the initial transition. It seems like the transitions are being ignored because the end result remains the same.

Is there a way to implement multiple CSS transitions on an HTML element?

Additionally, it appears that only the last transition applied due to the duration set for each one.

javascriptcssangularjs

Answer №1

Changing a property with different values in quick succession won't produce the desired outcome. Only the last value assigned will take effect.

If you're looking to apply one style alteration, followed by another after a short delay, you can make use of the $timeout service like so:

$scope.openCardSetMenu = function(cardSet) {
    $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'100%'};
    $timeout(function () {
        $scope.cardSetMenuNavStyle = {'transition':'0.25s', 'left':'50%'};
    }, 250);
};

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

How to link a JavaScript file within a PHP document

I have an HTML file (index.html) that is using JavaScript to call a PHP file (pdj.php) and display the output in a div (pdj), which is functioning correctly. $.ajax({ url: '../command/pdj.php', type: "POST", data: ({xparam: xpara ...

javascriptphpajax

Runner for Jasmine specifications and directive template URL

Within my angular application, I have encountered two distinct methods for running unit tests. The initial approach involves running Karma, while the alternative is to utilize the Jasmine spec runner due to its simplicity in terms of debugging. One chall ...

angularjsunit-testing

What is the best way to add color to the bottle's outline using clipPath?

How do I fill the background inside a bottle image with color? I have the coordinates for filling the bottle, but the background inside remains unfilled. .item { width: 150px; height: 150px; } #tubeLiquid { background-color: #74ccf4; clip-path ...

htmlcss

I'm having trouble applying CSS stylings to my components in my React project. What could be the issue causing this?

As a React beginner, I am facing issues with getting my CSS to work properly in my project. I know that CSS is not used directly in React, but rather interpreted as JavaScript using webpack and babel. What have I tried? I attempted to make changes to my w ...

javascriptcssreactjswebpackcss-modules

Number failed to trigger ng-disable

I attempted to use ng-disabled attribute to disable a button but was unsuccessful. Below is the HTML snippet: <tr ng-repeat="eachdata in tabledb"> <td>{{eachdata.paid}}</td> </tr> <button class="btn btn-primary" ng-click="p ...

angularjs

transfer information between different express middleware functions within a universal react application

I am working on an isomorphic react app and I am looking for a way to pass state between express middleware functions. One of my express routes handles form submission: export const createPaymentHandler = async (req: Request, res: Response, next: NextFun ...

javascriptnode.jsreactjsexpress

Struggling to Understand Middleware in Node.js Express

I am currently delving into Express.js and finding myself a bit puzzled by the nuances between middleware functions and route handlers. I grasp the concept that middleware functions typically include the next argument, but I am struggling to discern when a ...

javascriptnode.jsexpressmiddlewareverification

Using Jquery to manipulate arrays based on options selected from a dropdown menu

I am currently working on a feature that suggests tags based on the selected category. This involves using a select box to choose a category and then displaying sub-categories in a list. Here is the current setup: <select id="categorySelect"> < ...

javascriptjqueryarrays

What is the best way to design a regular expression that will only match up to 12 numbers?

Is there a way to construct a regular expression that will validate a string containing up to 12 digits only? Thank you! ...

javascriptangularjsregex

Show off a sleek slider within a Bootstrap dropdown menu

Is there a way to display a sleek slider within a Bootstrap dropdown element? The issue arises when the slider fails to function if the dropdown is not open from the start, and the prev/next buttons do not respond correctly. For reference, here is my curr ...

javascriptjquerycssbootstrap-4slick.js

WebGL Error: An invalid operation occurred while trying to use the uniformMatrix4fv function. The error code [WebGL-00000A18072FEA00

Currently, I am working on an app that showcases 360° images and I rely on the BabylonJS library for this feature. The navigation bar helps me switch between different 360 locations within the application. However, whenever I try to change the 360 image ...

javascriptreactjsbabylonjsbabel-babylon

Learn how to apply CSS styles from one component to another in Angular

I am attempting to modify the background color of a wrapper from a different component. I tried using ::ng-deep but it's not functioning correctly. For the mauto component, the background should be a solid block color. For the vgud component, the back ...

cssangularangular12

Transmitting a variable string from JavaScript to PHP through AJAX

How can I pass a variable value from an HTML page using JavaScript to PHP? In my index.php file, I have the following code: $amount = $_GET['pricenumb']; echo $amount; Here is the JavaScript code I used to call on click of a button and send th ...

javascriptphpajax

Applying various Angular filters to an array of objects within HTML select elements

I'm fairly new to working with JS and the rather challenging learning curve of AngularJS. I have an array containing numerous objects with the relevant properties listed below: $scope.myRecs = [{country: 'Ireland', city: 'Dublin&apos ...

javascriptarraysangularjsfilterionic-framework

Comprehending the "fitBounds" Function in Google Maps

Just to clarify, I want to ensure that my understanding is correct. In my Google Maps app, I want to display markers from specific continents to my users. Question: Is it accurate to say that a boundary in the Google Maps API is an area defined by NO MORE ...

javascriptgoogle-mapsgoogle-maps-api-3

Implementing event handling for external modules using on method in Node.js

I have been utilizing the request module (available at https://www.npmjs.com/package/request) for executing a series of http requests in my application. However, I am currently facing an issue while attempting to integrate a logging feature into it. I am s ...

javascriptnode.jsevent-handlingdom-eventseventemitter

Issue with React setState not triggering when switching between tabs in Material UI. Attempted to hide using a div with display set to none

Every time I switch between Material UI Tabs, the state gets cleared and does not persist. Check out this link for more information I have attempted different solutions: Using React Context to pass in the React State, but the issue remains unresolved T ...

javascriptreactjsmaterial-ui

Issues arise with the Node EJS module due to the malfunction of the include

Struggling with incorporating HTML snippets into my index.html, even after reviewing the EJS documentation. Directory Structure: project -public --assets ---css ---images ---js --Index ---index.html + index.css and index.js --someOtherPageFolder -views - ...

javascripthtmlnode.jsexpressejs

Creating a form in Vue that dynamically generates checkbox options

In my Vue application, I have a dynamically generated form with v-models within a loop. Everything is working correctly except for checkboxes. The issue I am facing is that the v-model is affecting all the loops instead of just one, unlike with the input t ...

javascriptformsvue.js

Modifying HTML Email to Achieve Consistent Rendering Across Various Email Platforms

While creating an HTML based email for our subscribers, I noticed that it renders differently in various email clients. The main issue arises in Outlook 2003 where the main picture is offset to the left and the grid boxes vary in height depending on the co ...

cssemailhtml-email