Angular animation - transitioning the state autonomously

Looking for some help here - check out this StackBlitz.

I'm trying to create a simple highlight effect where an element's background quickly changes color and then fades back to white.

The sample includes two buttons to demonstrate different transitions, but I'd like to combine them into one method for flashing and fading.

I want to keep the animation separate from the component for reusability.

To change states, I attempted setting highlightState in form.component.ts to true, then immediately back to false. However, instead of seeing what I expected, nothing happens.

Even after using setTimeout() and maintaining the same transitions in highlight.ts, the highlight remains on indefinitely.

I know this concept is basic, and it's frustrating that I can't get it to function as intended. Any assistance would be greatly appreciated!

angulartypescriptanimationhighlight

Answer №1

My go-to choice for animations is keyframe animations. Keep in mind that the animation should be triggered regardless of the element's state. The * symbol is used for this purpose.

In this context, * <=> * signifies that I am indifferent to the element's current state - just execute the animation.

SEE DEMO

highlight.ts

export const highlight = trigger('highlight', [transition('* <=> *', useAnimation(
  animation(
    animate(
      '500ms 0s',
      keyframes([
        style({ background: '#FFFFFF' }),
        style({ background: '#ff0000' }),
        style({ background: '#FFFFFF' })
      ])
    )
  )
))]);

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

Encountered issue with deploying Angular app to Firebase platform

After attempting to deploy my Angular 4 application on Firebase, I noticed that the setup process did not prompt me for any configuration details as outlined in various resources online. Despite running the 'firebase init' command and only being ...

angularfirebasefirebase-hostingfirebase-tools

Import all constants that have been exported in ES6 TypeScript and store them as an array

I am faced with the challenge of exporting multiple constants that I will later need to import and iterate through as an array. Due to my use of generics (OptionInterface) and the necessity to maintain type validations, I cannot simply place all constants ...

typescriptwebpackecmascript-6module-export

Implementing a delay for triggering an event in Angular based on certain conditions

I'm trying to create a div that triggers a click event. When the user clicks on the "click here" label, I want an alert to appear based on two conditions: first, if getListData is true, and second, only if the label is clicked after 5 seconds of getLi ...

javascriptangulartypescript

Steps for adding an input box to an md-menu item

I'm looking for an option that allows me to either add an item to an existing list or create a new one, similar to YouTube's 'Add to playlist' feature. The current implementation sort of works, but the menu disappears as soon as the inp ...

angularangular-material2

The getAuth() helper found in the api directory's Clerk retrieves the following data: { userId: null }

I'm completely stuck here.. Currently working with the clerk and I am looking to access the userId of the current user using the getAuth() helper. For more information, refer to the docs: pages/api/example.ts import { getAuth } from "@clerk/n ...

typescriptauthenticationnext.jsclerk

After updating the file path, the Next.Js module couldn't be located: Module not found – Unable to

After relocating the EmptyTable.tsx file from its original directory at views/forms-tables/tables/react-table/EmptyTable to a new location at components/Tables/EmptyTable, I encountered a persistent issue. Despite updating the import path in my code to mat ...

reactjstypescriptnext.js

Facing the issue of "Protractor not syncing with the page" while trying to navigate an Angular website

I'm currently attempting to follow the tutorial for Protractor on the official Protractor website, but I've hit a roadblock at step 0. My setup involves using protractor and webdriver-manager version 6.0.0. I am running Linux (Ubuntu 18.06) as m ...

javascriptangularseleniumprotractor

Guide on utilizing interface within a class for functional de-structuring in TypeScript

In my current project, I have a Class that contains a method which I would like to utilize in a de-structured manner, primarily due to the presence of multiple optional arguments. To maintain strict typing, I have created an Interface to define these argum ...

angulartypescripttypescript-typings

Revamp the Bootstrap Form Upload feature

I am looking to redesign the Bootstrap Form Upload field. The main reason behind this is that in Bootstrap, the file upload field is treated as one single component, making it impossible to separate the file upload button from the file upload text. The fi ...

htmlcssangular

Encountering a JavaScript error in Angular 2: "TypeError: undefined is not a function when

I encountered an issue with my Angular 2 project that was created using angular-cli version 1.0.0-beta.30 and utilizing the ngx-charts version 4.1.2 library. The bar chart component functions properly, however, when I tried to add a line chart, I faced a T ...

javascriptangulartypescriptchartstsconfig

Comparison between the version of a particular dependency and the version of its dependent dependency

Imagine a scenario where I have dependency X version 1.0 and dependency Y version 1.0 defined in my package.json. Would there be any issues if Y requires X version 2.0 (as indicated in the package-lock.json) but I continue to use X version 1.0 in my code ...

node.jstypescriptpackage

Is using global variables as a namespace a good practice? Creating ambient TypeScript definitions in StarUML

I'm currently working on creating TypeScript type definitions for the StarUML tool. While I've been successful in defining most of the API, I've hit a roadblock when it comes to linking a JavaScript global variable ("type" in this case) with ...

typescriptnamespacestypescript-typingsstarumlambient

Refreshing Angular 7 application does not function properly on IIS despite having the web.config properly set up

Something strange is happening with my Angular 7 application. Whenever I click refresh, the routes seem to be lost and a 404 error is displayed. Despite following advice to configure the web.config file, this behavior persists. Here's a snippet from ...

javascriptangulariisroutes

There was a problem with Type TS2507: The Type 'typeof Tapable' cannot be used as a constructor function type

After creating my own TypeScript library for shared TS models, I wanted to incorporate it into a couple of other projects I'm working on. Here are the essential parts of the library repository: index.ts: export interface IApp { ... } package.json: ...

node.jstypescriptnpmwebpackyarnpkg

Exploring the Concept of Constructor Interfaces in TypeScript

I need some help with understanding constructor interfaces in TypeScript. I am new to this concept and I'm struggling to grasp how they are type checked. Let's take a look at an example from the documentation: interface ClockConstructor { ne ...

javascriptinterfacetypescript

Redux connect does not provide the `dispatch` function to the connected component

Can you take a look at my code? const Checkout = ({items, setItemAmount}: CheckoutDisplayProps, dispatch: AppDispatch) => { useEffect(() => { dispatch(getOrders()); }, [dispatch]); return <CheckoutDisplay items={items} se ...

reactjstypescriptredux

Checking if a route path is present in an array using Typescript and React

Here is a sample of my array data (I have simplified it here, but there are approximately 100 elements with about 20 values each): 0: odata.type: "SP.Data.ProductListItem" Title: "This is Product 1" Id: 1 1: odata.type: "SP.Data.ProductListItem" Title: ...

arraysreactjstypescriptreact-reduxreact-router

Is there a way to verify within the "if" statement without repeating the code?

Is there a way in javascript (or typescript) to prevent redundant object rewriting within an if statement condition? For example: if (A != null || A != B) { // do something here } // can it be done like this: if (A != null || != B) { // avoid repeating ...

javascripttypescriptif-statement

Display the previous 12 months in reverse chronological order with Angular 6 using a select dropdown option

I aim to dynamically display the last 12 months with the year in a select option. For example: If the current month is March and the year is 2021, the first option should show as March-2021 followed by the previous 12 months in reverse order. If the cur ...

javascriptangulardateangular6

Comparing performance: Execution time of Core JavaScript versus jQuery

Is it necessary to use jQuery if my purpose can be fulfilled by core JavaScript alone? I am concerned whether using additional libraries like jQuery will slow down the application or not. If anyone has any resources or references on this topic, I would a ...

javascriptjqueryangular