问题描述
我正在尝试在角度4中设置路径过渡的动画,该动画在首次加载页面时起作用,并且在页面刷新时起作用,所以我知道该动画起作用,但是当我切换路径时却不起作用.我想念什么?
I'm trying to animate route transitions in angular 4, the animation works when the page first loads, and on page refreshes, so I know the animation works, however not when I switch routes. what am I missing?
这是代码...
//组件元数据
animations: [fadeInAnimation]
//tempalte
// tempalte
<div class="route-container" [@fadeInAnimation]>
<router-outlet></router-outlet>
</div>
//样式
.route-container {
position:relative;
}
.route-container>* {
display:block;
}
//动画
trigger('fadeInAnimation', [
// route 'enter' transition
transition(':enter', [
// css styles at start of transition
style({ opacity: 0 }),
// animation and styles at end of transition
animate('6s cubic-bezier(.35,0,.25,1)', style({ opacity: 1 }))
]),
]);
推荐答案
为了确保每条路径上的路由动画proc,您需要定义每条路径之间的过渡.以下是在"home"路线和"acct"路线之间转换时用来创建抽屉效果的示例:
In order to make sure routing animation proc on each route you will need to define transitions between each route. The following is an example that I use to create a drawer effect when transitioning between my 'home' route and my 'acct' route:
import { trigger, animate, style, group, query, transition } from '@angular/animations';
export const baseAnimation =
trigger('baseAnimation', [
transition('acct => home', [
query(':enter, :leave', style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':leave', style({ height: '*'})),
query('.acct', [
animate('300ms',
style({ height: 0 }))
])
]),
transition('home => acct', [
query(':enter, :leave',
style({ position: 'absolute', top: 0, left: 0, right: 0 })),
query(':enter .acct', [
style({ height: 0 }),
animate('300ms', style({ height: '*' }))
])
])
])
请注意, .acct
是指帐户页面路由的类标签,对于您的应用程序可能不是必需的(或可能需要进行相应更改).通过这种方式,您可以在路线更改时为每个路线的子元素设置动画.
Note that .acct
refers to a class label for the account page route, and may not be necessary for your application (or may need to be changed accordingly). In this manner you can animate sub-elements of each route on route changes.
我在 app.component.html 中使用一个函数来处理路线动画:
I use a function in my app.component.html to process route animations:
<div [@baseAnimation]="prepareRouteTransition(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
</div>
app.component.ts 应该加载动画并声明路线的动画:
And the app.component.ts should load the animations and declare animations for the route:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { baseAnimation } from './anim/base.animation';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [ baseAnimation ]
})
export class AppComponent {
constructor() { }
prepareRouteTransition(outlet) {
const animation = outlet.activatedRouteData['animation'] || {};
return animation['value'] || null;
}
}
这篇关于角度4中的动画路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!