动画：仅适用于某些元素

Question

我正在开发使用 this 框架生成的 .NET Core Angular 4 应用程序。我想添加一些路由器动画，然后按照 this 教程进行操作。

总的来说它似乎可以工作，但仅针对某些元素触发动画。例如，我有这样的观点：

<h1>Courses</h1>

<p>This is a simple example of an Angular 2 component.</p>

<p>Current count: <strong>{{ currentCount }}</strong></p>

<button (click)="incrementCounter()">Increment</button>

它的控制器class是：

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

@Component({
    selector: 'courses',
    templateUrl: './courses.component.html',
    animations: [fadeInAnimation],
    host: { '[@fadeInAnimation]': '' }
})
export class CoursesComponent {
    public currentCount = 0;

    public incrementCounter() {
        this.currentCount++;
    }
}

按照教程中所示的相同方式，我添加了一个包含动画的文件：

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

export const fadeInAnimation =
    trigger('fadeInAnimation', [
        // route 'enter' transition
        transition(':enter', [

            // styles at start of transition
            style({ opacity: 0 }),

            // animation and styles at end of transition
            animate('.3s', style({ opacity: 1 }))
        ]),
    ]);

使用这些代码，不会显示任何错误，但仅在视图的 "increment" 按钮元素上触发（并且可见）动画。 h1 和 p 元素立即显示。

与教程代码唯一不同的可能是路由。我的路由是：

const routes: Routes = [
    {
        path: "",
        component: ContainerComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: "",
                redirectTo: "courses",
                pathMatch: "full"
            },
            {
                path: "courses",
                component: CoursesComponent
                /*resolve: { home: HomeResolver }*/
            },
            {
                path: 'subscriptions',
                component: SubscriptionsComponent,
                canActivate: [AdminGuard]
            },
            {
                path: 'registry',
                component: RegistryComponent,
                canActivate: [AdminGuard]
            },
            {
                path: 'settings',
                component: SettingsComponent,
                canActivate: [AdminGuard]
            },
            {
                path: "**",
                component: PageNotFoundComponent
            }
        ]
    }
];

ContainerComponent 目前有一个带有此模板的空控制器：

<header>
    <nav-menu></nav-menu>
</header>
<main>
    <div class="container body-content">
        <router-outlet></router-outlet>
    </div>
</main>
<footer>
    <p>&copy; 2017 - CaliUP</p>
</footer>

我错过了什么？为什么动画只作用于按钮而不作用于其他元素？

提前谢谢大家:)

Answer 1

我已经尝试了那个确切的教程，但未能使淡入淡出工作，但确实使滑入淡出工作。但是我有一个淡入淡出动画的解决方法。

export const fadeInAnimation = 
     trigger('fadeInAnimation', [

        state('void', style({ position: 'absolute', width: '100%', height: '100%', opacity: 0 })),
        state('*', style({ position: 'absolute', width: '100%', height: '100%', opacity: 1 })),

        transition(':enter', [
            style({ transform: 'translateY(20%)', opacity: 0 }),
            animate('0.8s ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
        ]),

        transition(':leave', [
            style({ transform: 'translateY(0%)' }),
            animate('0.8s ease-in-out', style({ transform: 'translateY(-20%)', opacity: 0 }))
        ])

    ]);

希望这对您有所帮助，尽管这是一个迟到的答案！

动画：仅适用于某些元素

Animations: works only on some elements

animation

typescript

angular-routing

.net-core

angular