Troubleshooting: Angular 2 property binding animations not functioning as expected

I'm attempting to create a fade-in animation for a div element.

Here is the code snippet:

import {
    Component,
    trigger,
    state,
    style,
    transition,
    animate,
    keyframes,
    group
} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <button (click)="toggle()"> toggle div </div>
        <div [@visibilityChanged]="visibilityState">
            <p>Some text...</p>
        </div>`,
    animations:
        [
            trigger('visibilityChanged', [
                state('shown', style({opacity: 1})),
                state('hidden', style({opacity: 0})),
                transition('shown => hidden', animate('600ms')),
                transition('hidden=> shown ', animate('300ms')),
            ])
        ],
})

export class AppComponent {
    visibilityState : string = 'hidden';
    toggle(){
        if(this.visibilityState === 'hidden')
            this.visibilityState = 'shown';
        else
            this.visibilityState = 'hidden';
    }
 }

Despite setting the visibility state to 'hidden', the text "Some text..." still appears visible. The toggle function seems ineffective and other click events are not responsive in the code. Removing the div solves the issue as the program begins working correctly, but it loses the fade-in/out animation feature. What could be causing this problem? Any suggestions or insights would be greatly appreciated!

Answer №1

It appears that your code is correct but the issue lies in the imports you are using.

Since Angular 4, animations are no longer included in @angular/core but have their own package. Therefore, your import statement should be adjusted as follows:

import { trigger, style, transition, animate, group } from '@angular/animations';

In addition, you need to include BrowserAnimationsModule. For instance, in your AppModule:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  // ...
  imports: [BrowserAnimationsModule]
})
export class AppModule { }

If you do not have the AnimationsModule installed, you can do so by running the following command:

npm install @angular/animations@latest --save

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

Discover the process of implementing nested service calls in Angular 2 by utilizing observables

Here are my component file and service file. I am trying to achieve that after the verification() service method is successfully called, I want to trigger another service method signup() within its success callback inside subscribe. However, I am encounter ...

The success variable of the Ajax running continuously in a loop is not being refreshed

Within this code snippet, a for loop is utilized to iterate through an array called netnos[] and update the variable 'nets' for each item. Ajax is then invoked to call a PHP script that generates a listing, which is successfully outputted to the ...

Traversing tables with JQuery's nextUntil function

I have a calendar table where I need to highlight the range from the pickup date, maybe 10 Feb, to the set date of 20 Feb. <tr class="rd-days-row"> <td class="rd-day-body rd-day-disabled">09</td> <td class="rd-day-body">10& ...

What is the process of generating enum values using ES6 in Node.js?

Can JavaScript support enumerations with assigned integer values, similar to how other programming languages handle it? In C#, for instance, I can define an enum as follows: enum WeekDays { Monday = 0, Tuesday =1, Wednesday = 2, Thursday ...

incorrect <div> <img src="<?php under construction?"

When I try to display images using the construction <div> <img src="<?php..., the images appear as intended. However, there are extra strings leftover from my code after each image. An excerpt of the problematic code: First, I retrieve ...

Utilizing Bootstrap 5 for Angular Projects

With the release of version 5, the Bootstrap framework has eliminated the need for jQuery. I am curious about how this change impacts Angular applications. Can we still utilize all of Bootstrap's features in Angular, such as dropdowns? In the past, ...

Upon clicking, choose a specific todo ID

I'm currently in the process of developing a basic todo application, and I am receiving data through props from a GraphQL Server in the following format: id:"5b3447a7b9d0e02144538972" text:"biibbb" My current issue is that when I click on the checkb ...

Whenever a user logs in or logs out from the child component, the app.js is not being re-rendered

I'm having trouble figuring out how to re-render the app.js function. It loads initially, but when I click the login or logout button, I need to call a function from the helper again to check the user status. Here is the code snippet for App.js: impor ...

Can you guide me on creating a post and get request using ReactJS, Axios, and Mailchimp?

I am brand new to ReactJS and I am currently working on developing an app that requires integration with Mailchimp to allow users to subscribe to a newsletter. I am looking for assistance on making a request using axios. Where should I input my API key? ...

My instance transforms with the arrival of a JSON file

I'm grappling with a query about data types in TypeScript and Angular 2. I defined a class in TypeScript export class product{ public id:number; public name:string; public status:boolean; constructor(){} } and I initialize an instanc ...

Angular to always show loading spinner on page load

Utilizing my Angular project with the Ant Design NG Zorro loading spin. I encountered an issue where the loading spin is continuously active on my Angular page. Does anyone know the correct way to implement this loading spinner? Thanks View the example o ...

Protecting website pages on both the admin and user side in Next.js 14 to ensure maximum security

I'm currently using nextjs 14 and I am working on developing a website similar to a property app. It will have an admin dashboard and a user side. How can I ensure the security of both the admin and user sides, and what should my folder structure look ...

Guide on transferring Javascript array to PHP script via AJAX?

I need to send a JavaScript array to a PHP file using an AJAX call. Here is the JavaScript array I am working with: var myArray = new Array("Saab","Volvo","BMW"); This JavaScript code will pass the array to the PHP file through an AJAX request and displ ...

retrieve information from the local JSON file

Hi there, I am looking to retrieve data from my JSON file and then display it in HTML. Before that, I want to simply log it in the console. How can I accomplish this task? The JSON file will be updated based on user input. varer.json [{"id":&qu ...

Modifying button text with jQuery is not feasible

I'm facing a challenge with jQuery and I need the help of experienced wizards. I have a Squarespace page here: . However, changing the innerHTML of a button using jQuery seems to be escaping my grasp. My goal is to change the text in the "Add to car ...

Use Onblur and Onfocus events in an input field that is read-only

Here is an input field: <input class="" type="text" id="Name_11_1" name="Name" value="Your name:"> I would like to modify it as follows: <input class="" type="text" id="Na ...

Is there a way to implement this media query within my JavaScript code?

I am attempting to make my website recognize when the screen width surpasses 1096px in order to apply some CSS styling. Below is the code I'm using: var mq = window.matchMedia('@media all and (max-width: 1096px)'); if(mq.matches) { wind ...

What could be causing my jQuery code to not function properly?

I wrote a small piece of code in jQuery, but I am having trouble executing it. Can someone help me figure out what I'm doing wrong? <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"> & ...

Encountering a problem with Angular 11 SSR after compilation, where the production build is causing issues and no content is being displayed in

{ "$schema":"./node_modules/@angular/cli/lib/config/schema.json", "version":1, "newProjectRoot":"projects", "projects":{ "new-asasa":{ "projectType": ...

With a tree arrangement flanking the Transfer module on either side

I have successfully implemented the antd's Transfer component using the examples provided in the documentation. I was able to create a tree transfer box that looks like this: https://i.sstatic.net/OEPPK.png However, I am wondering if there is a way t ...