angular ng-view: appears after being concealed

When it comes to showcasing content with ng-animate and ng-view, I must admit it adds a touch of sexiness. However, I'm facing an issue where I want the second content to show only after the first content has been hidden, but I can't seem to figure out how to achieve this. Any help would be greatly appreciated!

<div ui-view='' ng-view='' class="fade"> ... </div>

Below is my CSS for the fade class:

.fade {
    opacity: 1;
    transition: all 1s ease;
}
.fade.ng-enter,
.fade.ng-leave {
}
.fade.ng-enter {
    opacity: 0;
}
.fade.ng-enter-active {
    opacity: 1;
}
.fade.ng-leave {
    opacity: 1;
}
.fade.ng-leave-active {
    opacity: 0;
}
javascriptcssangularjsng-animateng-view

Answer №1

To achieve the desired effect, incorporating some JavaScript is necessary. A callback function will be triggered after an animation concludes, allowing for the execution of a subsequent action. Begin by adding the following code to manage the animation across various web browsers:

var pfx = ["webkit", "moz", "MS", "o", ""];

prefixedEvent = function (element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
      if (!pfx[p]) type = type.toLowerCase();
      element.addEventListener(pfx[p]+type, callback, false);
    }
  }

  removePrefixedEvent = function (element, type, callback) {
    for (var p = 0; p < pfx.length; p++) {
      if (!pfx[p]) type = type.toLowerCase();
      element.removeEventListener(pfx[p]+type, callback, false);
    }
  }
  transitionEnded = function(elementToAnimate){
    removePrefixedEvent(elementToAnimate.srcElement, "TransitionEnd", transitionEnded);
    //perform the new animation here e.g., newElement.style.opacity = 1;
  }

Next, initiate the first animation:

var elementToAnimate = document.getElementsByClass("fade")[0];
prefixedEvent(elementToAnimate, "TransitionEnd", transitionEnded);

Implement something similar to this approach ;)

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

Ways to maintain an array in Vuex even after mutations take place? (Specifically focusing on persisting data through browser refresh)

I am in the process of developing a basic shopping cart and I need guidance on how to persist an array containing cart data when executing the addProduct mutation below. Is there a way to save this data temporarily to prevent it from being lost due to br ...

javascriptarraysvue.jspersistencevuex

What could be causing npm to fail to launch?

Whenever I execute node app.js, my server functions perfectly. However, when attempting to utilize nodemon for running the server, it fails to start. The error displayed by npm start is as follows: npm ERR! code ELIFECYCLE npm ERR! errno 9009 npm ERR! < ...

javascriptnode.jsnpm

Run a script following the completion of loading data through ajax within a loop

boot_sections = ["123625","113231","11232","113216", ..... ]; for (var k in boot_sections) { $.get('/load?sectionId=' + boot_sections[k], function(data) { $('#sections').append(data); }); } This is the spot where I loa ...

javascriptjqueryajax

Storing information in a parse table using NodeJs

I am trying to add data to a Parse table. At the top of my code, I have the line import Parse from 'parse/node';. Here is how I am inserting the data: const game = Parse.Object.extend('Game'); const query = new Parse.Query(game); que ...

javascriptnode.jsexpress

Issues with AngularJS ng-bind-html failing to display list items

I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...

javascripthtmlangularjsng-bind-html

URL endpoint resource containing a parameter enclosed in parentheses for a RESTful API

For a current project I am tackling, the client has provided a specific HTTP POST command that needs to be integrated into the existing webserver built on a MEAN STACK. The request is as follows: ({{Host}}/Products('{{ProductId}}')/Data.Order). I ...

javascriptnode.jsresturl

Is it possible for jquery to reposition and resize div elements?

I need help with a web page layout that consists of a header, footer, and middle area divided into 3 equal columns, each occupying 33% width. My goal is to create an interactive feature where clicking on one column causes it to expand above the other two, ...

javascriptjqueryajax

I found myself pondering the significance of the {blogs: blogs} in my code

app.get("/articles", function(req, res){ Article.find({}, function(err, articles){ if(err){ console.log("an error occurred!!!"); }else{ res.render("homepage", `{articles: articles}`); } }); I created this c ...

javascriptnode.jsmongodbexpressejs

Arranging Data in Horizontal Bar Chart with D3.js

I have a dataset that includes the following frequency data: FrequencyData = [ {label:"QWERTY", value:0}, {label:"AZERTY", value:14}, {label:"AAAAAA", value:20}, {label:"BBBBBB", value:30}, ...

javascriptsortingd3.jsgraphbar-chart

Two-faced, object model in ThreeJS

Is there a way to render an obj model double-sided in three.js (r.84)? Below is the code snippet for loading the obj using obj loader: THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); var mtlLoader = new THREE.MTLLoader(); mtlLoade ...

javascriptthree.js

What is the process for saving an SVG element from an HTML page as a downloadable text file?

I've been practicing creating SVG elements from scratch on an HTML page using Javascript. The texts within the SVG element are styled with typefaces fetched from the server through a "@font-face" declaration in the CSS file. It's been quite succe ...

javascripthtmlsvgtext

Dynamically inserting a new row into a table with the power of jQuery

Currently working on dynamically adding rows to a table through jQuery in my project that follows MVC design pattern. I have set up a loop for the added rows, but need help with the script. Here is my code snippet for the loop : <?php $viewTableR ...

javascriptphpjqueryhtmlhtml-table

What is the best way to incorporate setTimeout in a loop using Coffeescript?

window.onload = -> boxOrig1 = 10 boxOrig2 = 30 canvasW = 400 canvasH = 300 ctx = $("#canvas")[0].getContext('2d'); draw = (origin,dimension) -> ctx.clearRect(0, 0, canvasW, canvasH) ctx.fillStyle = 'rgb(200,0 ...

javascriptjquerycoffeescriptsettimeout

What is the best way to make hover text that also copies when you highlight the main text?

Currently, I am utilizing a basic bootstrap tooltip for creating tables with jQuery. However, I require a specific functionality that the standard bootstrap tooltip does not provide. I need the ability to copy the base text and have it appear as "base tex ...

jqueryhtmlcssbootstrap-4

"Learn an effective method for presenting JSON variable data in a Bootstrap modal with a clean design using three distinct columns

I have successfully loaded JSON data into my HTML page using JQuery. By clicking a button, I can trigger a bootstrap modal that displays the content of the JSON variable. However, there is an issue with how the JSON data is displayed. I need the data to b ...

javascriptjqueryhtmljsonnested-loops

Updating page content when switching tabs

When navigating through my explorer, I often have multiple tabs or pages open. On these tabs/pages, I can modify global information such as a session variable. If I make changes to this session variable while on one tab/page and then switch back to anoth ...

javascriptjqueryasp.nethtmlsession

At what point is ng-if triggered?

I am currently in the process of developing functionality for buttons that open directives in modal windows. To keep things simple, I decided to use a modal container flagged with the versus directive: <div ng-if="vm.Modal.Modal1"> <directive-for ...

javascriptjqueryangularjs

Utilize a directive to showcase information stored within the scope

Struggling to grasp the concept of directives and encountering a bug along the way. To see my example in action, check out the codepen I've created here In my scope called "movies," I have 3 movie titles that I want to display using a directive. va ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-directive

I'm having trouble with accessing an object by index in a knockout observablearray. It seems like the binding process is encountering difficulties

I'm completely new to stackoverflow and knockout, and I have a query. I want to access a JSON object by index. It works fine when I insert dummy data in my code, but it throws an error when I try to add data from JSON. Error Uncaught TypeError: Unab ...

javascriptjqueryjsonknockout.js

Creating endless scroll feature in Vuetify's Autocomplete component - A comprehensive guide

Having trouble with my Vuetify Autocomplete component and REST API backend. The '/vendors' method requires parameters like limit, page, and name to return JSON with id and name. I managed to implement lazy loading on user input, but now I want i ...

javascriptvue.jsvuetify.js