angular - 同一组件内的角度动画
问题描述
我试图将动画添加到我的整个网站。我面临的问题是,在同一个组件中,但是一条新路线,我的动画不起作用。我已将动画设置为在路线更改时激活。
这是我的路由设置:
const routes: Routes = [
{path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'not-found', component: PageNotFoundComponent},
{path: 'home', component: HomeComponent, data: { state: 'home'}},
{path: 'stage', component: StageComponent, data: { state: 'stage'}},
{path: 'documenten', component: DocumentenComponent, data: { state: 'documenten'}},
{path: 'competenties/:uid', component: CompetentieComponent, data: { state: 'competenties/:uid'}}
];
这是我的动画:
export const routerTransition = trigger('routerTransition', [
transition('* <=> *', [
query(':enter, :leave', style({position: 'fixed', width: '100%'})
, {optional: true}),
group([
query(':enter', [
style({transform: 'translateX(100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
], {optional: true}),
query(':leave', [
style({transform: 'translateX(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}
], {optional: true}),
])
]),
]);
这是用来调用动画的 HTML
<div [@routerTransition]="getState(o)">
<router-outlet #o="outlet"></router-outlet>
</div>
这是模板的 TypeScript:
import {routerTransition} from './animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [routerTransition]
})
export class AppComponent {
public getState(outlet) {
return outlet.activatedRouteData.state;
}
}
我尝试使用 :increment 作为过渡,但它似乎不起作用。我对角度动画完全陌生,所以任何建议/帮助都会被应用!
谢谢!
解决方案
问题是组件被重用并且在这种情况下角度将其视为没有变化,因此不会触发过渡动画。
这篇文章提供了一个解决方案https://medium.com/frontend-coach/angular-router-animations-what-they-dont-tell-you-3d2737a7f20b
推荐阅读
- excel - 使用 Excel 索引/匹配搜索包含数字和文本的列
- video - GStreamer:在 MJPEG 和 H264 之间转码时,在播放期间输出加速和减速
- jenkins - 在 Jenkins 上运行量角器脚本
- python - 从 bs4 标签正确解码字符串
- python - 使用 python 3 安装 virtualenv 时出错
- javascript - 网站不允许我们大约一半的用户登录。饼干问题。Ubuntu
- java - 处理每个数组行包含 100 到 100 条指令的大型 3d 数组是否是一个需要在 GPU 上解决的好问题?
- python-3.x - 从特定字符串中获取数字的 Lambda 函数
- python - Python - Pandas 垂直拆分 CSV
- flutter - 如何获取列表
从元素另一个列表,我得到 CastList