Dynamic CSS Changes in AngularJS Animations

I am currently working on a multi-stage web form using AngularJS. You can see an example of this form in action by visiting the link below:

http://codepen.io/kwakwak/full/kvEig

When clicking the "Next" button, the form slides to the right smoothly. However, when clicking the "Back" button, the form does not slide back to the left as expected. I believe that changing the "ng-animate" CSS when the "Back" button is clicked would resolve this issue.

Could you provide guidance on how I can accomplish this?

Thank you!

javascriptcssangularjs

Answer №1

To control the animation direction in your controller, you can create a variable for it. Here's an example of how you could set this up:

$scope.update = function() {
   $scope.direction = 1;
}

$scope.backTo = function() {
   $scope.direction = 0;
}

In your HTML code, make sure to encapsulate the animated elements like this:

<div ng-class="{forward: direction, backward: !direction}">
   your animated content here
</div>

Next, define your CSS rules accordingly:

.forward .animate-switch.ng-leave{  
  left:0;
}
/* hide */
.forward  .animate-switch.ng-leave.ng-leave-active{ 
  left:-100%;
}
/* show entering slide  */
/* hide */
.forward .animate-switch.ng-enter {
  left:100%;
}
/* show */
.forward .animate-switch.ng-enter.ng-enter-active { 
  left:0;
}

.backward  animate-switch.ng-leave{  
  /* etc */
}

You can view a demonstration of this concept on your CodePen: http://codepen.io/sbosell/pen/rKJal

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 could be causing the ng-change to not trigger?

After adding a dropdown and connecting the selectChange() method to the ng-change demo in AngularJS, I'm encountering an issue where the selectChange() function does not fire when the dropdown value is changed. Can anyone help me understand why this i ...

angularjs

Can variables be transmitted through Real-Time Communication in JavaScript?

Currently, I am in the process of developing a multiplayer game using three.js. The basic framework is all set up and my next step is to implement the multiplayer aspect. After some research, I came across RTC as a solution that doesn't require comple ...

javascripthtmlvariablesjsfiddlechannel

What is the most efficient way to evenly separate a CSS3 gradient?

Is there anyone who can assist me in achieving an even gradient break? body { height: 2500px; background: -webkit-linear-gradient(#000000 1%,#FFFFFF 1%,#FFFFFF 13%,#2ecc71 13%,#2ecc71 30%,#3498db 30%,#000000,#FFFFFF,#34495e); } I've been att ...

htmlcss

The Order of Transitions Reversed in CSS

I have a unique situation that I'm hoping to get some help with. I've been trying to create an effect where I move text away and lift up a gray box, and then when my mouse moves away from the gray box, the box goes down first before the text move ...

htmlcsstransition

Split the string in JavaScript and then count the characters to decrypt

I am currently working on a task that involves splitting a string at every space. I have successfully achieved this using .split(" "), but now I need to determine the length of each individual string. My goal is to check if a given string includes a midd ...

javascriptstring

Error in Typescript for a function that accepts several types of lists - property does not exist on the interface

In my project, I have defined three interfaces: a base interface and two others that extend the base one with children as properties. One of the interfaces includes 'valueType' while the other includes 'returnType'. Here is how they are ...

javascripttypescripttypescript-typings

The CSS menu appears more compact when viewed on a different page

Recently, I've been working on a website for practice and decided to include a menu. It functions perfectly on the first webpage, but appears slightly smaller on the second one. Here's the code snippet I used for the menu on the initial page: &l ...

htmlcssmenu

What is the process of setting up Express as an API web server and integrating a custom document renderer as middleware?

I have developed a code generator and I want to be able to execute it on the server. The generator utilizes pure native ECMA6 JavaScript to render HTML markup, but it is transpiled to ES5 before runtime using Babel and WebPack. I am looking to use this on ...

javascriptnode.jsexpressecmascript-6

Retrieving the user's Windows username with JavaScript

Is it possible to retrieve the Windows user name solely in Internet Explorer using the code below? function GetUserName() { var wshell = new ActiveXObject("WScript.Shell"); alert(wshell.ExpandEnvironmentStrings("%USERNAME%")); } What methods ...

javascriptjqueryangularjs

Tips for converting JSON information on a website and inserting it into a designated division?

I've recently delved into front-end development, searching for solutions and hints without much success. I'm currently in the process of building my first website, specifically a "find recipes" website. Lacking knowledge of API calls, I created a ...

javascriptjqueryhtmljsonajax

Secure Access: Passport.js User Verification & Authorization

Recently, I successfully developed my first User login and authentication system using Passport.js. While the system works as intended, I am struggling to fully comprehend the code itself despite reading numerous articles and examples online. I would great ...

javascriptnode.jsexpresspassport.js

When using React.js Material UI's CardActionArea with a flex display, the children elements may not automatically use the full width as expected

Getting straight to the point - I recently experimented with changing the display style property from block to flex, along with setting flexDirection: 'column' for the CardActionArea component. The main goal was to ensure that CardContent maintai ...

javascriptreactjsmaterial-ui

Leveraging JavaScript Functions in HTML

I am having an issue with a JavaScript file containing two similar functions that are executed through an HTML form. While the first function runs smoothly, the second function does not display correctly. It seems like I might be calling or executing the ...

javascripthtmlangularjs

The dynamics of Express.js functionalities

I am seeking to better understand how flow functions within an Express app using Routes, with the following set of Routes: app.use(require('./routes/reportsRouter')); app.use(require('./routes/crewsRouter')); app.use(require('./ro ...

javascriptnode.jsexpress

Using the Angular translate filter within a ternary operator

I am currently working on translating my project into a different language. To do this, I have implemented the Angular Translate library and uploaded an external JSON file containing all the translations. Here is an example of how it looks: { "hello_wor ...

javascriptangularjsangular-translate

Oops: [$injector:modulerr] Could not create ngFoursquare module because of

I'm struggling with limited angularjs knowledge and trying to integrate Ionic with Foursquare. However, I keep encountering errors. Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to: Error: [$injector: ...

angularjsionic-frameworkfoursquare

CSS - Issue with table cell height exceeding in Mozilla Firefox and Internet Explorer

Examining the code below <div style="border:solid 5px orange;width:400px;height:400px"> <div style="display:table;border:solid 1px red;width:100%;height:100%"> <div style="display:table-row;border:solid 1px blue"> <div sty ...

csshtmlwebcss-tables

Having trouble deciphering mathematical formulas while editing content on ckeditor

While using math formulas in CKEditor, I noticed that when I insert new content via textarea, the formulas are displayed correctly. However, when I go back to edit the content, the text formulas do not display as before. This is the source code I am using ...

javascriptjqueryhtmlckeditorfckeditor

Tips for using rspec to test front end functionality?

In my Rails project, I have incorporated Vue.js using only the core library. Currently, most forms in the project are developed with Vue.js. When testing front-end features like form filling or validations using feature tests in RSpec, I found it to be qui ...

javascriptruby-on-railsrspecvue.js

The date filter in IE11 is causing a significant slowdown when used in conjunction with ng-repeat and other filters

My ng-repeat function with custom filters and a date range filter is working perfectly in Chrome, Mozilla, and Android. However, when using Internet Explorer with the Date Range filter, everything slows down significantly. It takes 10 seconds for the filte ...

angularjsperformanceinternet-explorerangularjs-ng-repeatangularjs-filter