import { Component } from '@angular/core'; import {animate, group, query, stagger, state, style, transition, trigger} from "@angular/animations"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [ trigger('queryAnimation', [ transition('* => *', [ query('h1', style({ opacity: 0 , color: 'red'})), query('.content', style({ opacity: 0, color: 'green', width: '100px', height: '100px', border: '1px solid red' })), query('h1', animate(1000, style({ opacity: 1, color: ' blue' }))), query('.content', animate(1000, style({ opacity: 1, width: '50px', height: '100px', border: '10px solid green'})), {optional: true}), ]), transition(':leave', [ style({color: 'pink'}), animate(2000) ]) ]), ] }) export class AppComponent { public gg: string; constructor() { } goAnimate() { return true; } }
这个gif有点卡，但是可以大概看出路由切换时是有动画的。这是上面两个例子的效果图
state只能放在trigger里，不能搁在transition里
目前就这么点，才看了一点，以后慢慢补充~~~
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》