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让Html中特殊字符不被转义
Nov 05 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
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
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
js转html实体的方法
2016/09/27 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
python定时关机小脚本
2018/06/20 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python实现转圈打印矩阵
2019/03/02 Python
python语言元素知识点详解
2019/05/15 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
python与idea的集成的实现
2020/11/20 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
自动化专业职业生涯规划书范文
2014/01/16 职场文书
追悼会子女答谢词
2014/01/28 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
公务员考察材料
2014/12/23 职场文书
情人节单身感言
2015/08/03 职场文书