Angular's browser animation feature allows for smooth slide-up animations from the bottom

I have been experimenting with creating a simple animation, and it's working, but in the opposite direction of what I intended. I want the div to open from bottom to top and close from top to bottom.

Here is my animation code in Angular:

animations: [
    trigger('inOutAnimation', [
      transition(':enter', [
        style({ height: 0, opacity: 0}),
        animate('1s linear ', style({ height: 318, opacity: 1 })),
      ]),
      transition(':leave', [
        style({ height: 318, opacity: 1 }),
        animate('1s linear', style({ height: 0, opacity: 0 })),
      ]),
    ]),
  ],

The div I am animating has a position absolute while its parent has a relative position. I've tried searching online for ways to reverse the animation, but nothing like animation-direction: reverse; seems to work. Any suggestions?

cssangularanimationtypescss-animations

Answer №1

A more effective approach would be to define the state and transitions as follows:

 animations: [
trigger('inOutAnimation', [
  state('inState', style({ bottom: 0, opacity: 1 })),
  state('outState', style({ bottom: -100px, opacity: 0})),
  transition('inactive => active', [
    outState
    animate('1s linear', inState),
  ]),
  transition('active => inactive', [
    inState
    animate('1s linear', outState),
  ]),
  
]),
]

You can then programmatically change the value of inOutAnimation from active to inactive. It is also recommended to use the bottom CSS property instead of height.

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

The mystery of the Accordion Effect: A Next.js/React.js issue where it slides up but refuses to

After implementing a custom accordion using next.js, I encountered an issue where the slide animation worked successfully when moving up and out upon clicking the button. However, when trying to move it back down into the content, it did not animate as exp ...

javascriptcssreactjsnext.jsaccordion

Modify the style of an element using a media query and Angular 4

Is there a way to update a class of an element based on the browser's width in my .ts file? matchMedia('(max-width: 400px)').addListener((mql => { if (mql.matches) { this.myclass = 'toggled'; } })); In the HTML, it shou ...

htmlangulartypescript

What distinguishes display:none from *ngIf = 'false'?

The visibility:hidden property in CSS hides an element without changing its position or affecting the layout of other elements on the page. On the other hand, setting ngIf = 'false' in Angular removes the element from the DOM entirely, effectivel ...

angular

What is the best method for saving information from a service to a class or interface in Angular 2?

I am currently in the process of developing a new web application and I am fairly inexperienced with Angular2. I am encountering an issue with one of my components that acts as a form for users to update their data. The problem lies in accessing specific ...

angulartypescript

Angular 2 code test coverage

Looking to calculate the code coverage of my Angular 2 code. Wondering if there are any plugins available for VS Code or WebStorm that can assist with this. My unit testing is done using Jasmine and Karma. ...

angularunit-testingtypescriptcode-coverage

Design a personalized select element with a unique background hue

https://i.stack.imgur.com/Dzifp.jpg Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear. https://i.stack.imgur.com/A4P9Q.png Plea ...

htmlcss

Issue encountered when trying to retrieve the property of an object within an array in an Angular application

Having an issue with comparing path properties in Chrome Chrome debug shows different content for path properties compared to Angular Angular throws error: 'Property 'path' does not exist on type 'string' Looking for suggestions ...

arraysangular

The Bootstrap nav-link class functions perfectly in Firefox, smoothly guiding users to the appropriate section. However, it seems to be experiencing some issues

I am currently working on customizing a one-page web template and I don't have much experience with Bootstrap. The template can be found at . My issue is that the menu items are not functional in Chrome. When I click on any menu item, nothing happens ...

javascripthtmlcsstwitter-bootstrap

What is the trick to getting the <label> and <input> elements to show up side by side in an HTML form?

I am designing a registration form for a new website. My goal is to have each label and its corresponding input element displayed on the same line. Here's the CSS code I'm using: #registration-form { background-color: #FFF; height: 600px; ...

htmlcssforms

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable: The HTML structure for these two dialogs ...

javascriptcssangulartypescriptprimeng

Angular2 form builder generating dynamic forms based on results of asynchronous calls

When creating my form, I encountered a challenge with passing the results of an asynchronous call to the form builder. This is what I have attempted: export class PerformInspectionPage implements OnInit { checklists: any; inspectionform: FormGroup; n ...

angulartypescript

Tips for addressing a situation where an npm package encounters issues during AOT compilation

As a newcomer to web development, I am currently struggling with an issue that has me stumped. Within my web application, I am utilizing the npm package called @uniprank/ngx-file-uploader (https://www.npmjs.com/package/@uniprank/ngx-file-uploader). While ...

angularnpmangular-compiler-cliangular-aot

The AgGridModule type does not feature the property 'ɵmod'

Recently, I decided to update my application from Angular 12 to Angular 13. The tools I am using include webpack 5, ag-grid 15.0.0, and ag-grid-angular 15.0.0. While the compilation process goes smoothly for the app, I encountered an issue when trying to l ...

angularangular13

Changing background colors of dropdown items in VueJs

Currently grappling with understanding the intricacies of styling in web development (specifically VueJS). I am facing some challenges: I am dynamically rendering colored dropdowns filled with dropdown items. I am struggling to figure out how to change t ...

htmlcssvue.js

Expanding the size of a text area input within a form using CSS and

How can I adjust the size of the text area in the Comment section to match the full width of the section, starting from the beginning instead of the middle? You can find the code here. HTML <body bgcolor="#00BCD4"> <div> <h1>Co ...

htmlcssformstextareawindow-resize

The overflowing pop-up container

When I trigger a popup that dynamically generates a fixed background with a centered dialog, it works well. However, on smaller monitors like laptops, tablets, and phones, the content can overflow beyond the visible area due to its fixed container, making ...

jquerycss

What is the best way to ensure that all elements on an HTML webpage stay centered regardless of zoom level?

My HTML and CSS skills are not at an expert level. Despite my best efforts, when I zoom in on the webpage I created, certain elements like the logo and language switcher appear broken. I'm unsure how to address this issue. Can someone please provide m ...

htmlcss

Initiate an animation upon reaching a designated element using Jquery scroll event

Hey there! I've been trying to create an animation without using any plugins, but unfortunately, I haven't had much luck so far. Here's the code I've been working on. If anyone can help me figure this out, I'd really appreciate it ...

jqueryhtmlcss

Node modules are incapable of being installed within node packages

Whenever I use the ng serve command in my terminal, an error pops up: 10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/ i ｢wds｣: webpack output is served from / i ｢wds｣: 404s will fall ...

angularnpm

Increase the size of the Iframe tag to a larger scale

Can someone help me figure out how to make my iframe content fill the entire screen? Any assistance would be greatly appreciated. Photos: Current Output: Desired Output <!DOCTYPE html> <html lang="en"> ...

htmlcssiframe