Angular4.0动画操作的示例分析
这篇文章主要为大家展示了“Angular4.0动画操作的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Angular4.0动画操作的示例分析”这篇文章吧。
成都创新互联公司专注于保德网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供保德营销型网站建设，保德网站制作、保德网页设计、保德网站官网定制、小程序定制开发服务，打造保德网络公司原创品牌,更为您提供保德网站排名全网营销落地服务。
具体如下：
粗略的记录一下angular4的动画
先看一下angular中文网关于这个给的例子。
有两个组件home，about。 路径配置什么的这里就不细说了，之前的博文有说过，我就贴一下代码，很好理解的，
需要import的东西我先说一下，我只贴了使用动画要用的东西，其他的我省略了，
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRouting
],
...
})在这个简单的例子里我要对app.component.html里的内容进行animate，所以我的
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [] // 这里代码我省略了，先说一下结构，后面说具体实现。
})以上就是需要写动画实现的基本结构，下面贴实现这个例子的代码。为了方便阅读，我把代码解释就贴在代码旁边
例一：
这是路由配置：
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {AboutComponent} from "./about/about.component";
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, data: { state: 'home' } },
{ path: 'about', component: AboutComponent, data: { state: 'about' } }
];
export const AppRouting = RouterModule.forRoot(routes, {
useHash: true
});app.component.html
Blah blah blah
Title
app.component.ts
import { Component } from '@angular/core';
import {routerTransition} from './router.animation';
import {animate, group, query, stagger, style, transition, trigger} from "@angular/animations";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('routerTransition', [ // 第一个参数是动画名称 stateChangeExpr
transition('* <=> *', [ // 指定什么时候执行动画，状态的来源可以是简单的对象属性，也可以是由方法计算出来的值。重点是，我们得能从组件模板中读取它。官网上有提供一些通配符，[传送门](https://angular.cn/api/animations/transition)
query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
query('.block', style({ opacity: 0 }), { optional: true }),
group([ // block executes in parallel
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 })
]),
query(':enter .block', stagger(400, [style({ transform: 'translateY(100px)' }),
animate('1s ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 })),
]), { optional: true }),
])
]),
]
})
export class AppComponent {
public exp = '';
gg(outlet) { // 传递进入的组件的信息
console.log(outlet.activatedRouteData.state);
return outlet.activatedRouteData.state;
}
}效果动图在最后。
比对着官网给的API，总结一下动画部分~
我是按自己的理解说的，有不对的地方还请多多指教，共勉！O(∩_∩)O~
即动画名称，它的属性值可以是字符串也可以是函数，若是函数，则每次状态发生改变都会重新执行，若函数返回true，则对应的动画就会执行。
它里面的动画只在满足条件时执行，过了这个点它就变回原始样式了，
可以保持动画样式
即对应void => * 、 * => void 状态
例子二
app.component.html
Title
Blah blah blah
app.component.ts
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('h2', style({ opacity: 0 , color: 'red'})),
query('.content', style({ opacity: 0, color: 'green', width: '100px', height: '100px', border: '1px solid red' })),
query('h2', 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里
以上是“Angular4.0动画操作的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享名称：Angular4.0动画操作的示例分析
文章链接：
http://kswjz.com/article/poighh.html
