Animate the parent view with Angular UI Router

My current state setup is nested as follows:

.state('contacts', {
    url: '/contacts',
    views: {
        '': {
            templateURL: 'views/contacts.html',
            contacts: 'ContactsCtrl'
        }
    }
})
.state('contacts.view', {
    url: '/contacts/:name',
    views: {
        '': {
            templateURL: 'views/contacts-details.html'
        }
    }
});

The content of contacts.html is:

<section id="contacts-list">
    <h1>This is a list of contacts</div>
    <article class="contacts" ng-repeat="contact in contacts">(...)</article>
    <ui-view/>
</section>

The content of contacts-view.html is:

<h2>{{ contact.name }}</h2>

I have successfully animated the enter and leave events of contacts-view.html, but I am looking to add a slide effect to the #contacts-list container. Any suggestions on how to achieve this?

Thank you!

Answer №1

If you're looking to switch up your contacts-view.html, consider this:

Swap out the contents with:

<section id="contacts-list">
    <h1>Check out this list of contacts</div>
    <article class="contacts" ng-repeat="contact in contacts">(...)</article>
    <h2>{{ contact.name }}</h2>
</section>

In your contacts.html file, try adding:

<section id="contacts-list" ui-view>
    <h1>This is a list of contacts</div>
    <article class="contacts" ng-repeat="contact in contacts">(...)</article>
</section>

This should do the trick unless you don't mind having repeated code in your templates.

Update:

I now have a better understanding of your goal:

What about trying this:

<section id="contacts-list" ng-class="{ detail: $state.is('contacts.view')>
    <h1>This is a list of contacts</div>
    <article class="contacts" ng-repeat="contact in contacts">(...)</article>
    <ui-view />
</section>

You can then incorporate add/remove animation classes to the detail class. This approach should eliminate unnecessary repetition and DOM element manipulations.

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 display JSON objects containing nested key-value pairs

In my JSON structure, each Mealplan includes a key and a corresponding value which is an object called meal. id: 1, mealsPerWeek: { Monday: { id: 4, name: "Burger", }, Tuesday: { id: 3, name: "Salad&qu ...

What is the best way to acquire an ID that is generated dynamically?

Being new to javascript and ajax, I am facing a challenge. I have a while loop with 2 buttons, both of which seem to function correctly, except for one small issue... The product-id is only being passed for the first or last element in the loop. How can I ...

When zooming out, Leaflet displays both tile layers

I'm currently working on integrating two tile layers along with a control for toggling between them. Below is the code snippet I am using: const layer1: L.TileLayer = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { ...

In the Bootstrap multiselect feature, users will be able to choose whether to display an image or selected text

Is there any way to display an image by default instead of options? Code: <select id="example-post" style="width:120px;!important;" class="footerSelect" name="multiselect[]" multiple="multiple"> <opti ...

Is it permissible to make alterations to npm modules for node.js and then share them publicly?

I have made modifications to a module called scribe.js that I use in my own module, which is published on npm. Instead of using the original module as a dependency for my module, I would like to include my modified version. I am unsure about the legal impl ...

Tips for validating a session on a React client following a successful authentication via an Express session

After setting up an express REST API backend and React Front End, the front end app redirects users to the signin page using OAuth. The express server then creates a session ID after successful authentication, which can be seen as a browser cookie connect. ...

What is an alternative approach to passing arguments to an event handler in a React render component without using a lambda function?

In my React app, I've learned that using lambda functions in the property of a render component can harm application performance. For example: <ConfirmSmsModal modal={args.modal} smsCheck={async (code: string) => { return await this._vm ...

The perplexing phenomena of Ajax jQuery errors

Hey there! I'm having a bit of trouble with ajax jquery and could use some guidance. $.ajax({ type:"get", url:"www.google.com", success: function(html) { alert("success"); }, error : function(request,status,error) { alert(st ...

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

After successfully changing the SCSS $primary-background-color to orange using the video.js default skin editor (CodePen), I encountered an issue. Whenever I hover my mouse cursor over the video, the big play button background reverts to its default grayis ...

JavaScript asynchronous problem

When developing a simple Javascript function to validate user input for City and State, it encounters an issue with asynchronous behavior. The function checks if the user has entered values in the specified input fields and then proceeds to geocode the l ...

How can I integrate the jQuery Plugin Mapael with Angular 5?

While exploring various methods that tackled the issue of integrating jQuery Plugins, I decided to start with the fundamentals. To begin with, I installed the jQuery plugin: npm i jquery Next, I included the TypeScript definition: npm install -d @types ...

How can an HTML5 application be configured to enable access to intranet and local files?

It's a known fact that accessing the local path of a file added using a file input field or drag-and-drop is not possible even with the new FileAPI. Whether this limitation is good, bad, or ugly is not up for debate. The FileAPI specs clearly state th ...

Turn off pagination for tables in Material-UI

Currently, I am utilizing the TablePagination component from Material-UI in my React project. Unfortunately, this component does not come with a built-in disabled prop. I do have a boolean variable called loading that I would like to utilize as a paramet ...

Replace the phrase "add to cart" with "plus" and "minus" in Opencart

I am trying to customize the Add to Cart functionality in OpenCart 2.0.1.1 by replacing it with plus and minus buttons. I have successfully added the plus button, however, I am facing difficulty coding for the minus button. The code snippet below shows w ...

JavaScript's blank identifier

One interesting feature in Golang is the use of the _ (Blank Identifier). myValue, _, _ := myFunction() This allows you to ignore the 2nd and 3rd return values of a function. Can this same concept be applied in JavaScript? function myFunction() { re ...

The route in my Node.js Express application appears to be malfunctioning

I am facing an issue with my app.js and route file configuration. Here is my app.js file: const express = require('express'); const app = express(); const port = process.env.PORT || 8080; const userRoute = require('./routes/user.route' ...

JavaScript: A step-by-step guide to extracting the file name and content from a base64 encoded CSV

I have a base64 string that was generated by encoding a csv file, const base64 = 'LS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLTExNDc2MDgwNjM5MTM4ODk4MTc2NTYwNA0KQ29udGVudC1EaXNwb3NpdGlvbjogZm9ybS1kYXRhOyBuYW1lPSJmaWxlIjsgZmlsZW5hbWU9ImNoYXJ0T2ZBY2NvdW50LmNzd ...

Is it beneficial to cater to users who do not have JavaScript capabilities on my website, considering that I am currently using JS links to

My website heavily relies on JavaScript for navigation, passing a parameter to always indicate the starting page and displaying it in a navbox for easy access back. Should I include both href links for non-JS versions and onclick links for JS-enabled vers ...

Exploring the implementation of useMediaQuery within a class component

Utilizing functions as components allows you to harness the power of the useMediaQuery hook from material-ui. However, there seems to be a lack of clear guidance on how to incorporate this hook within a class-based component. After conducting some researc ...

The eternal Three.js animation that loops endlessly whenever it is clicked

The Objective My aim is to create a straightforward camera zoom in animation that increases the zoom level by a specific amount each time the button is clicked. The Current Status I have successfully implemented the animation using Three.js and linked i ...