Angular4.0动画操作实例详解


Posted in Javascript onMay 10, 2019

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

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

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
基于vue2.0实现简单轮播图
Nov 27 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
Angular 2使用路由自定义弹出组件toast操作示例
May 10 #Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 #Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 #Javascript
Vue项目中配置pug解析支持
May 10 #Javascript
Angular2实现的秒表及改良版示例
May 10 #Javascript
node中IO以及定时器优先级详解
May 10 #Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 #Javascript
You might like
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
js 数组操作代码集锦
2009/04/28 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python实现SOM算法
2018/02/23 Python
python使用turtle库绘制树
2018/06/25 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Django如何将URL映射到视图
2019/07/29 Python
python输出带颜色字体实例方法
2019/09/01 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
高中打架检讨书
2014/02/13 职场文书
外贸业务员求职信
2014/06/16 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
小学校长开学致辞
2015/07/29 职场文书
信息技术国培研修日志
2015/11/13 职场文书
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS