Angular animations are failing to function in the Visual Studio 2017 template

I am facing a challenge with incorporating animations in Angular 2 using Visual Studio 2017. I believe there must be a simple solution that I am overlooking at the moment. My goal is to animate certain elements and I have been testing the animations by triggering them with a click event on a button, but unfortunately, nothing seems to be happening;

The content of my app.shared.module.ts file is as follows;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/shared/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { ContactComponent } from './components/shared/contact/contact.component';
import { HeroComponent } from './components/shared/hero/hero.component';
import { FooterComponent } from './components/shared/footer/footer.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        ContactComponent,
        HeroComponent,
        FooterComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        NoopAnimationsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

This snippet shows how my component.html file looks like;

<div class="hero">
    <div class="colour-overlay"></div>
    <div class="row">
        <div class="col-md-6">
            <h2 [@fadeInAnimation]="state">TEST1</h2>

            <button (click)="toggleMove()">Click Me!</button>
        </div>

        <div class="col-md-6">
            <contact></contact>
        </div>
    </div>

</div>

Furthermore, here is part of my component.ts code;

import { Component } from '@angular/core';
import { fadeInAnimation } from '../../../animations/fadeIn.animation';

@Component({
    selector: 'hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.css'],
    animations: [fadeInAnimation]
})
export class HeroComponent {

    state: string;

    constructor() {
        this.state = 'inactive';
    }

    toggleMove() {
        this.state = (this.state === 'inactive' ? 'active' : 'inactive');
    }
}

The animation itself is defined here;

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

export const fadeInAnimation =
    trigger('fadeInAnimation', [
        transition('void => *', [
            state('active', style({
                opacity: 1,
                transformX: 'transformX(0)'
            })),
            state('inactive', style({
                opacity: 0,
                transformX: 'transform(-100%)'
            })),
            transition('active => inactive', animate('300ms ease-out')),
            transition('inactive => active', animate('300ms ease-in'))
        ]),
    ]);

If anyone can provide some insight into what might be going wrong here, I would greatly appreciate it.

Answer №1

If you have included NoopAnimationsModule, it will deactivate all animations in your application. It is recommended to instead include BrowserAnimationsModule in your main application module.

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        // NoopAnimationsModule, //<- remove this
        BrowserAnimationsModule, //<- add this
        RouterModule.forRoot([...])
    ]
})
export class AppModuleShared {
}

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

Having trouble connecting DB and D3 using PHP. Struggling to follow D3noob's tutorial to completion

First and foremost, I want to express my gratitude to the amazing community here for all that I have learned. However, I'm currently facing some difficulties in finding the solution I need. I've encountered issues while trying to follow the inst ...

Managing Button State Based on Checkbox State Using Angular

I have developed a reusable directive and implemented it in two different forms. However, I am facing issues with enabling/disabling the button in one of the forms based on the state of a checkbox in the directive. I need the button to be disabled until th ...

Utilize the npm module directly in your codebase

I am seeking guidance on how to import the source code from vue-form-generator in order to make some modifications. As a newcomer to Node and Javascript, I am feeling quite lost. Can someone assist me with the necessary steps? Since my Vue project utilize ...

Guide to incorporating Ember into an existing HTML file

Planning to integrate Ember 2.0 into an existing HTML page and have a few queries regarding this. Is it necessary to build the ember project beforehand? This results in creating appname.js and vendor.js files. Which js files are essential to be included ...

Revolving mechanism within React.js

I am currently developing a lottery application using React.js that features a spinning wheel in SVG format. Users can spin the wheel and it smoothly stops at a random position generated by my application. https://i.stack.imgur.com/I7oFb.png To use the w ...

Achieving a similar functionality to Spring Security ACL in a Node.js AWS Lambda serverless environment

I am tackling a javascript challenge that has me stumped. Specifically, I am trying to figure out how to implement fine-grained authorization using an AWS serverless approach. In Spring security ACL, users can be banned from specific tasks at the instanc ...

Tips for sending a JavaScript variable to a PHP function in an Ajax URL

Can someone help me with inserting the parent value into the "getFaculties()" function when calling it using Ajax? function ajaxfunction(parent) { $.ajax({ type: 'GET', url: 'Connection.php?getFaculti ...

The process of batch file conversion and how to effectively utilize it

I am facing an issue with a small batch script that I have been working on. The purpose of this batch script is to execute a Javascript file that converts an XML file to a csv file, followed by running a Python script to analyze the created csv file and ge ...

Refreshing CSS-Element-Queries following an ajax request

I’ve been utilizing css-element-queries from the https://github.com/marcj/css-element-queries repository to tailor styles based on an element's dimensions. However, I encountered an issue when dynamically adding elements via ajax calls. The new elem ...

I'm unsure of my recollection on how to utilize the /* syntax in JavaScript

Hey there, I'm facing a little issue. Can someone remind me how to correctly use the /* in JavaScript when dealing with URLs? For instance: if(URL == "www.thing.com/"){} I can't quite remember where to insert the /* so that it applies not just ...

Establishing the value of "document.cookie"

Encountering issues while trying to set a cookie using different methods: Method 1: document.cookie = name + "=" + value + "; expires=" + date.toUTCString() + "; path=/"; This method only sets the value up to "name=value" wh ...

Creating a custom JavaScript function to manipulate arrays

I am working on a project involving an array of strings that represent class names. My goal is to instantiate these classes using their string names, but so far my attempts with the window object have been unsuccessful. The array structure looks like this ...

Display a notification to the user prior to reloading the page

I have created a code for logging attendance at work using a barcode reader. The user simply needs to scan their card with a barcode to register their attendance. let $scannerInput = $(".scanner-input"); $(document).ready(function(){ $scannerInput.focu ...

Executing HTTP Requests for Elements in an Array using JavaScript

I am currently struggling with a script that sends HTTP requests to a website in order to obtain various documents. The document IDs are stored within an array, and my intention is to send a request for each element in the array and return a unique message ...

Converting objects to arrays in AngularJS and Ionic: A simple guide

In the scenario where I have an object structured like this: {first: "asdasd", second: "asdas", third: "dasdas", four: "sdasa"}, my objective is to convert this object into an array. if(values){ var first=values.first; var second=values.second; var ...

Suggestions for a JavaScript tool that automatically crops images

Is there a tool available, either browser-based or in Java, that can analyze an uploaded image, identify different characters within it, and crop them out into separate images? For instance, if this image contains three unique runic symbols, I would like ...

Synchronize the scrolling of two tables sharing a common data source to ensure both tables scroll in unison

I encountered some issues while using ui-scroll in my application. My goal is to have ui-scroll function on the same datasource that is used to populate two tables. By scrolling one table, I want the other table created from the same data source to also s ...

What is the best way to utilize query parameters without using ui-router?

In my Angular application using ui-router, I am looking to maintain a separate state that is not related to routing. For example, if the URL is #/profile?color=green, the state is "profile" and the app color should be green. If the URL changes to #/profil ...

Executing AJAX POST request with callback function

I successfully used this code for the get function to retrieve data. It works flawlessly and I am able to fetch the required data using this function. function getdata(getdatafrom, resultclass){ $.get(getdatafrom, function(data) { $(result ...

Integrate text and HTML code to showcase in a user interface popover using UI-Bootstrap

Using restangular, I am fetching a collection of items from a server. Each item has a description in plain text and a longDescription which includes html formatting. My goal is to show this information within a single ui-bootstrap popover. I have impleme ...