欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular4.0动画操作实例详解

程序员文章站 2022-03-20 15:08:41
本文实例讲述了angular4.0动画操作。分享给大家供大家参考,具体如下: 粗略的记录一下angular4的动画 先看一下angular中文网关于这个给的例子。 有...

本文实例讲述了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

<nav>
 <a routerlink="home" routerlinkactive="active">home</a>
 <a routerlink="about" routerlinkactive="active">about</a>
</nav>
<main [@routertransition] = "gg(o)">
 <router-outlet #o="outlet"></router-outlet>
</main>
<div [@queryanimation]="goanimate()">
 <div class="content">
 blah blah blah
 </div>
 <h1>title</h1>
</div>
 <!-- 
 [@routertransition]="gg(o)" ,api:transition declares the sequence of animation steps that will be run when the provided statechangeexpr value is satisfied. statechangeexpr即等号左边即动画名称,注意中括号和@符不能省略,等号右边是一个函数,也可以是变量,满足条件便可以让动画进行,一个动画可以多次使用 
 -->

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~

  • statechangeexpr

即动画名称,它的属性值可以是字符串也可以是函数,若是函数,则每次状态发生改变都会重新执行,若函数返回true,则对应的动画就会执行。

Angular4.0动画操作实例详解

  • transition

它里面的动画只在满足条件时执行,过了这个点它就变回原始样式了,

  • state

可以保持动画样式

  • :enter 、 :leave

即对应void => * 、 * => void 状态

例子二

app.component.html

<div [@queryanimation]="goanimate()">
 <h1>title</h1>
 <div class="content">
 blah blah blah
 </div>
</div>

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('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;
 }
}

Angular4.0动画操作实例详解

这个gif有点卡,但是可以大概看出路由切换时是有动画的。这是上面两个例子的效果图

state只能放在trigger里,不能搁在transition里

目前就这么点,才看了一点,以后慢慢补充~~~

相关标签: Angular4.0 动画