動畫：僅適用於某些元素

我正在開發使用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 })) 
     ]), 
    ]);

使用這些代碼，不會顯示錯誤，但僅在視圖的「增量」按鈕元素上觸發（和可見）動畫。顯示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>

我缺少什麼？爲什麼動畫僅適用於按鈕而不適用於其他元素？

謝謝大家提前:)

來源

2017-05-24 Androidian

我已經試過了確切的教程，並沒有得到淡入出工作，但沒有得到滑入出工作。但是我有一個解決淡出動畫的工作。

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

    ]);

希望這會有所幫助，即使它是一個遲到的答案！

來源

2017-07-23 20:40:02 Maj

謝謝！不完全是我想要的動畫，但你的解決方案工作得很好！ :) – Androidian

動畫：僅適用於某些元素

回答

相關問題