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>

它的控制器类是：

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 }))
        ]),
    ]);

使用这些代码，不会显示任何错误，但仅在＆＃34;增量＆＃34;上触发（和可见）动画。视图的按钮元素。 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 }))
        ])

    ]);

希望这有帮助，即使这是一个迟到的答案！

动画：仅适用于某些元素

1 个答案: