代码之家 › 专栏 › 技术社区 › Matthew Flynn

角度动画在Visual Studio 2017模板中不起作用

visual-studio-2017 animation angularjs javascript

Matthew Flynn · 技术社区 · 8 年前

在Visual Studio 2017中,我无法使用Angular 2制作动画。我想我在这里遗漏了一些简单的东西,但我看不到。我想在动画中的几个元素,并测试动画使用一个按钮上的点击事件,但没有什么是发射;

我的应用程序。共享。单元ts is;

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 {
}

我的组件。html是;

<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>

我的组件。ts is;

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');
    }
}

最后是动画;

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'))
        ]),

    ]);

有人能指出我做错了什么吗?

1 回复 | 直到 8 年前

Pankaj Parkar 8 年前

自从你添加 NoopAnimationsModule ,这将禁用整个应用程序中的所有动画。尽管你应该添加 BrowserAnimationsModule 在主应用程序模块内。

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