Angular 6 animation moving forward (utilizing animation-fill-mode in Angular)

My CSS animated property is functioning properly with the code snippet below:

animation: collapse1 0.3s forwards;

However, I now need to transition to Angular animations. Everything is working correctly, except for one issue: once the animation completes, it reverts back to its initial state.

The current behavior looks like this:

animation: collapse1 0.3s;

When it should function like this:

animation: collapse1 0.3s forwards;

In essence, my question is whether it's possible to apply animation-fill-mode in Angular? My framework version is Angular 6.

For a demo, visit: https://stackblitz.com/edit/angular-uw3o6u

The demo includes 2 buttons.

The animation works as intended when the user hovers over the button (using :hover css). However, I want the same behavior when the user clicks on the button (case 2).

After clicking the button, the final position should be like this:

https://i.sstatic.net/X4TnG.png

Instead, it reverts back to the starting point:

https://i.sstatic.net/jgLTE.png

I managed to address this by utilizing CSS classes: https://stackblitz.com/edit/angular-kdfgxw

However, this solution doesn't utilize Angular animations.

If anyone knows how to resolve this using Angular animations, please let me know. Is it even feasible?

javascriptcssangularanimationangular6

Answer №1

I encountered a similar issue and managed to resolve it by utilizing CSS classes just like you did.

However, I discovered a simple and straightforward solution (which was surprisingly obvious).. You need to incorporate your final style within a state() function in your specific scenario

Take a look at this:

trigger(openCloseAnimation, [
  state('closed', style({ top: '9px', transform: 'rotate(-45deg)', offset: 1 })),
  transition('open => close',animate(300)),
  transition('close => open', animate(300))
])

It's worth noting that query cannot be used inside a state function, so when dealing with inner classes, consider using innerTrigger and apply animateChild() in the parent trigger.

Answer №2

I encountered a similar issue, and after dedicating some time to delving deeper into Angular Animations, I stumbled upon this valuable resource Transition and Triggers

When working with Angular animations, if you desire the transition to persist in its final state, it is essential to specify the state that the component should be in.

animations: [
    trigger('toggleControls', [
      state('show', style({
        opacity: 1, offset: 1, height: '64px', overflow: 'visible'
      })),
      state('hide', style({
        opacity: 0, offset: 1, height: '0', overflow: 'hidden', 
      })),
      transition('show => hide', [
        animate('1s', keyframes([
          style({ opacity: 1, offset: 0, height: '64px', overflow: 'hidden'}), // 0%
          style({ opacity: 0, offset: 0.5, height: '0', overflow: 'hidden'}), // 50%
          style({ opacity: 0, offset: 1, height: '0', overflow: 'hidden'}), // 100%
        ]))
      ]),
      transition('hide => show', [
        animate('1s', keyframes([
          style({ opacity: 0, offset: 0, height: '0', overflow: 'hidden' }), // 0%
          style({ opacity: 0, offset: 0.5, height: '0', overflow: 'hidden' }), // 50%
          style({ opacity: 1, offset: 0.9, height: '64px', overflow: 'hidden' }), // 90%
          style({ opacity: 1, offset: 1, height: '64px', overflow: 'visible' }), // 100%
        ]))
      ])
    ])
  ]

By defining your state, the CSS will retain that state at the end, akin to using "forwards" for the animation fill mode.

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

Angular 6 TypeScript allows for efficient comparison and updating of keys within arrays of objects. By leveraging this feature

arrayOne: [ { id: 1, compId: 11, active: false, }, { id: 2, compId: 22, active: false, }, { id: 3, compId: 33, active: false, }, ] arrayTwo: [ { id: 1, compId: 11, active: true, }, { id: 2, compId: 33, active: false, ...

javascriptangulartypescriptangular6

Implementing a form submission using jQuery AJAX

Does this code look right to you? I am attempting to submit it and would like the text area to be empty again after submission. <script type="text/javascript"> $(document).ready(function(){ $("form#submit").submit(function() { // Store ...

javascriptjqueryajaxpostsubmit

Retrieving specific elements in JavaScript from a JSON file

I am attempting to extract information from a JSON file with the following data: [3000,2500,6000,2200,5000,1300]. The file is named data.txt. To achieve this, I initialize an empty array in my code. Subsequently, I utilize the $.getJSON function by passi ...

javascriptjson

Issue with Material-UI NativeSelect not correctly displaying preselected option

I have the following code snippet: <NativeSelect classes={{ icon: classes.icon }} className={classes.select} onChange={this.onVersionChange} > { Object.keys(interface_versions).map(key => { return <optio ...

javascripthtmlnode.jsmaterial-ui

Creating a mesmerizing parallax effect for your image: A step-by-step guide

Looking for help to create a parallax effect on an image when hovered over. Does anyone have any advice or resources? Feeling frustrated at the moment. Here is an example link for reference: http://codecanyon.net/item/jquery-moving-perspective/full_scre ...

javascriptjquerycssimage

Retrieve the player's name from the database using jQuery

How can I retrieve the text value from my scores table in the database? Here is an image of my score table: https://i.stack.imgur.com/CUiMw.png The Player_name is stored as Player_id, which is a foreign key from the players' table. While I c ...

javascriptjquerylaravel-8

Combining Angular and Material Design: matdrawer and mattoolbar creating an overlapping effect

I'm currently facing a challenge in trying to construct a drawer that includes a mattoolbar, intended to overlap the primary toolbar of my application. Despite my efforts, I have been unable to rearrange the drawer higher up in the component hierarch ...

angularangular-materialtoolbardrawer

Showing loading spinner when clicked

I created a spinning animation in CSS, but now I want to hide it and only display it when a button is clicked. I've tried to achieve this using the following code, but the spinner doesn't appear when I click the submit button. To hide the spinne ...

javascriptbootstrap-4

Ways to expand CRA ESLint guidelines using the EXTEND_ESLINT environmental variable

Facebook's Create React App (CRA) recently introduced a new feature allowing users to customize the base ESLint rules. Recognizing that some cases may require further customization, it is now possible to extend the base ESLint config by setting the ...

javascriptnpmcreate-react-appeslint

Would it be considered improper to apply ID's to DOM elements for the purpose of automation, as it may transform their CSS classes into individual entities?

Just thinking about the best approach for Automation (such as Selenium). I've been advised against using IDs on elements, as it could result in JS errors (in case of duplicate IDs) and make CSS classes unique. While I see the point, not having IDs can ...

javascripthtmlcssautomation

Customizing CSS Styles in ASP.NET MVC for Multilingual Websites

We are looking to make our ASP-MVC website multicilingual and support different languages. One challenge I am facing is how to apply distinct style-sheets for each language, especially when dealing with right-to-left (RTL) languages like Hebrew or Arabic c ...

jquerycssasp.net-mvc

`Failure to prompt an error following an unsuccessful post request in a node.js application using axios and express`

I'm currently facing an issue while trying to implement password change validation. The problem lies in not receiving the errorMessage from the server in case of an error. Although I've successfully managed to update the password and send back a ...

javascriptnode.jsreactjsexpressaxios

The ng-packagr Angular library fails to update tsconfig paths with relative paths

In my Angular workspace (v10.0.2), I have a library and an app (used for testing the library). Within the projects/libname/src/lib/tsconfig.lib.json file, I have defined some paths: "baseUrl": "./src", "paths": { "@lib ...

angulartypescriptng-packagr

Transferring the link value to an AJAX function when the onclick event is triggered

I have a link containing some data. For example: <li><a href="" onclick="getcategory(this);"><?php echo $result22['category']; ?></a></li> I need this link to pass the value of $result22['category']; to ...

phpjavascripthtmlajax

Selling beyond webpack's confines

Today I had an interesting thought and couldn't find much information on it, so I decided to share some strange cases and how I personally resolved them (if you have a better solution, please feel free to comment, but in the meantime, this might be he ...

javascriptnode.jstypescriptwebpack

"Encountering errors during npm installation due to a failed preinstall

Having identified security vulnerabilities for knexnest > knex > minimist, I encountered an issue where the minimist version did not update using npm audit fix or a simple npm update. Following the steps outlined in this informative article resolved ...

javascriptnpmnpx

What strategies can be used to refactor nested callbacks in node and effectively pass parameters to each function within the callbacks?

I am currently in the process of refactoring some JavaScript code within a Node environment, and I'm encountering difficulties when it comes to passing parameters to functions that serve as callbacks for other functions. Here is an example of my curre ...

javascriptnode.jsexpress

Tips on Implementing a CSS Variable in a React Component

Is there a way to use content variable with in-line styles in React? I am unsure of how to accomplish this. CSS3 .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40p ...

cssreactjsmaterial-ui

Mat-paginator in Angular does not show up in mat-table

While working with Angular 12, I have imported the mat-paginator component using the following code: import { MatPaginator } from '@angular/material/paginator'; Then, in the export section, I attempted to reference the paginator with both of the ...

angularangular-materialmat-tablepaginator

Utilizing the @keypress event handler in VueJS

I am attempting to incorporate the onkeypress event within a Vue component. My goal is to allow only numbers on keypress while disallowing all other key codes. Here is what I have tried: Implementing the onkeypress event works perfectly! <input type=&q ...

javascriptvue.jsvuejs2vue-componentonkeypress