Height transition animation in Angular 2 - maintaining state consistency

I am currently working with an animation code that is linked to my component.

animations:[
        trigger('slide', [
            state('show', style({
                height: '*'
            })),
            state('hide', style({
                position: 'relative',
                height: 0,
                overflow: 'hidden'
            })),
            transition('show <=> hide',animate('130ms ease-out'))
        ])
    ]

Explaining this can be a bit challenging (and I'm having trouble getting animations to function on plunker) but here's my attempt.

The current function works as follows:

  1. User clicks a button to reveal a table.
  2. The table smoothly slides into view from beneath a div.
  3. User clicks the button again.
  4. The table smoothly slides out of view and up into the div.

The desired function is as follows:

  1. User clicks a button to display the table.
  2. The table smoothly slides into view from below a div.
  3. Additional rows are added to the table (which could be a substantial number).
  4. The animation adjusts to the new table height, ensuring a gradual transition to the new height instead of an instant display.
  5. User clicks the button.
  6. The table slides back up under the div.

    Edit: you can view a plunker demo here. You'll notice that when rows are added or removed from the table, the animation does not smoothly transition to the new height.

The issue arises when you are in the true state and new rows are added.

Since the animation is already in the true state, it won't transition to true again.

So how can I trigger a transition to the "newHeight" state when items are added?

Answer №1

Check out this example I quickly put together using the Angular animations API:

https://embed.plnkr.co/7qWuHmbFFie4p8Y9h53T/

Feel free to experiment with the plnkr to perfect the animations. You have the option to hide the element by either removing the table completely after animating it down using *ngIf in your template, or you can follow the approach I demonstrate in the plnkr, but toggle the visibility of the table after the animation completes. Personally, I prefer the *ngIf method.

For adding or removing individual rows:

I suggest adding an @animation to each row of the table and triggering the up animation when the number of rows increases or the down animation when it decreases.

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

Switch from scrolling the entire page to scrolling within a single div

Whenever I click on an element on my webpage, a modal window with a fixed position appears. The issue I am facing is that when I scroll using the mouse or touch gestures on my phone or tablet, the entire page scrolls instead of just the content within the ...

Properly managing mouseover events on a flipped div: tips and tricks

I created a div that flips when clicked using some HTML and CSS code. It works perfectly in Firefox 39 and Chrome 43. Here is the markup: <div class="flip-wrapper flippable-wrapper" id="fliptest-01"> <div class="flip-wrapper flippable ...

Can Angular 4 experience race conditions?

Here is a snippet of my Angular 4 Service code: @Injectable() export class MyService { private myArray: string[] = []; constructor() { } private calculate(result): void { myArray.length = 0; // Perform calculations and add results to myAr ...

Tips for effectively utilizing the 'or' operator when working with disparate data types

One of my functions requires an argument that can have one of two different types. If you're interested in TypeScript functions and types, take a look at the official documentation, as well as these Stack Overflow questions: Question 1 and Question 2 ...

Exploring Angular 5 Localization

I am new to the concept of locales. I recently created an Angular 4 app that reads the locale from the browser using the navigator.language() API and provides it to Angular's pipes. However, with the changes in v5, I have some questions regarding migr ...

Is it possible to use Primefaces tooltip to show at the bottom of the page

When I hover over the PrimeFaces tooltip, it displays at the bottom of the page. Here is my code and image link: <!DOCTYPE html> <h:html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com ...

Tips for ensuring that divs resize to match the container while preserving their original proportions:

#container { height: 500px; width: 500px; background-color: blue; } #container>div { background-color: rgb(36, 209, 13); height: 100px; } #one { width: 1000px; } #two { width: 800px; } <div id="container"> <div id="one">&l ...

The grid area may not properly adjust based on the width size of the browser

When adjusting the width of your browser, you may notice occasional white space in the bottom right corner. https://i.stack.imgur.com/UFV6R.png https://i.stack.imgur.com/VfhMN.png Is there a way to remove this extra margin? In other words, how can I ens ...

Expanding Bootstrap 5 navbar-nav to occupy entire screen space in collapsed state

Hello everyone, I hope you are doing well! I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler. While the toggler is functioning properly, I am having trouble making it fill the full width o ...

Ways to activate Form Validators in angular2?

I recently developed an Angular2 web application and successfully integrated a custom validator using the form builder. Although it works when the form is submitted, I am facing difficulties in triggering validation dynamically based on changes in other fo ...

Center-align the table element

I've been struggling to center align this table element, specifically the one containing the square, but nothing seems to be working. Can anyone lend a hand in fixing this issue? <table> <tbody> <tr> <td>TURKEY - SU ...

ReactJS creating trouble with incorporation of CSS in Table

I've noticed some strange behavior with the alignment of my table data. It seems to be all over the place. How can I fix this issue? Is there a way to specify column widths and ensure the text starts from the same position? Take a look at the table b ...

Utilizing MSAL to seamlessly retrieve tokens with the assistance of an HTTP interceptor

When encountering a 401 error in Angular, I am attempting to invoke the MSAL silentTokenrefresh method within the authInterceptor. The goal is to retrieve a new token and then retry the failed request seamlessly so that the service remains uninterrupted. F ...

Transforming Input Background Color with jQuery based on Matching PHP Array Entry

I am looking for a solution to implement form validation in PHP. The form has 3 fields: user, id, and email. When a user enters their name or id in the respective input fields, I want to check if the entered value matches any of the values in the PHP arra ...

Click on an element using jQuery to apply a specific class to all other similar

I am looking to dynamically add a class to a DIV after clicking on an A element with the same class. Here is an example: <ul> <li><a href="#1" class="test1">1</a></li> <li><a href="#2" class="test2">2</a>< ...

Maintaining a fixed header that remains visible while scrolling through a dropdown menu in Angular

In my application, I have a mat-select widget that displays a list of options. When scrolling within the list, I find it difficult to keep track of all the options. I am looking to enhance the user experience by adding a fixed header at the top of the opt ...

Enhancing CSS compatibility for Internet Explorer 9 with CSS3

I need to create a Jagged Edge border without relying on an image, and I want it to be compatible with IE9 and newer versions. Currently, it works in most browsers but not in IE9. Any suggestions or advice would be greatly appreciated. Thank you! Below is ...

Tips on resolving the issue: Error - There is a discrepancy in the metadata version of the module, with version 4 being

Encountering an error during the production build of my Ionic application: Error: Metadata version mismatch for module C:/Users/p/Desktop/p/trunk/p/Work/node_modules/ionic2-calendar/calendar.module.d.ts, found version 4, expected 3 Here's my package ...

What techniques are most effective for concealing a div container through css?

I attempted to hide the #div element using CSS: #div{ display: hide; } However, the method did not work as expected. ...

display the designated image as a priority

I am designing a loading screen for my website that includes the loading of multiple images, scripts, and other elements. While the HTML and CSS part is working well, I need to ensure that the "loading..." image is loaded before anything else on the page. ...