Angular 2 + 折腾记 :(10) 初步了解动画,以及一步一步写个动画
发布时间:2020-12-17 09:23:36 所属栏目:安全 来源:网络整理
导读:前言 过渡动画这东西,在现代开发中是必不可少的,死板和酷炫与之息息相关; ng2.x动画相关的api是并入@angular/core这个核心模块的,在angular4之后开始独立 但是,写法上差异不大,只是引入变了,引入方式请参考我的这篇文章的: 问题2: 动画已经独立出一
前言过渡动画这东西,在现代开发中是必不可少的,死板和酷炫与之息息相关; ng2.x动画相关的api是并入@angular/core这个核心模块的,在angular4之后开始独立 但是,写法上差异不大,只是引入变了,引入方式请参考我的这篇文章的: # angular2+的过渡动画简介 Angular动画是基于标准的Web动画API(Web Animations API)构建的, Can I Use : Web Animations API 用起来本质上还是css2.1&3,只不过是放在api封装好的对象内,也就是说,css3的基础必须要好!! # 过渡动画的相关理论 大体的归纳一下有这么几点
实战这里拿一个最简单的渐现过渡来演示,如图 渐现代码import {
trigger,// 动画封装触发,外部的触发器
state,// 转场状态控制
style,// 用来书写基本的样式
transition,// 用来实现css3的 transition
animate,// 用来实现css3的animations
keyframes // 用来实现css3 keyframes的
} from '@angular/animations';
export const fadeIn = trigger('fadeIn',[
state('in',style({ display: 'none' })),// 默认元素不展开
transition('void => *',[ // 进场动画
animate(200,keyframes([
style({ height: '0',opacity: 0,offset: 0 }),// 元素高度0,元素隐藏(透明度为0),动画帧在0%
style({ height: '*',opacity: 1,offset: 1 }) // 200ms后高度自适应展开,元素展开(透明度为1),动画帧在100%
]))
]),transition('* => void',[
animate(200,keyframes([
style({ height: '*',// 与之对应,让元素从显示到隐藏一个过渡
style({ height: '0',offset: 1 })
]))
]),]);
如何使用动画?用法非常简单,在组件内调用即可;
// 这是写法2;我是把动画效果独立封装到对应的ts文件内,方便复用
import { fadeIn } from '../../../../../animation/fadeIn';
import { bounceIn } from '../../../../../animation/bounceIn';
@Component({
selector: 'app-list',templateUrl: './list.component.html',styleUrls: ['./list.component.scss'],animations: [fadeIn,bounceIn]
})
// 有人说为什么不直接写在代码内,比如下面这种写法
// 这种写法推荐在独立组件或者模块内,就是给第三方用,组件内部实现一个自己的过渡效果
// 若是对应系统来说,降低耦合度更方便我们维护,也就是我推荐上面那种写法的原因
@Component({
selector: 'app-list',animations: [
trigger('fadeIn',[
state('in',// 默认元素不展开
transition('void => *',[ // 进场动画
animate(200,keyframes([
style({ height: '0',// 元素高度0,元素隐藏(透明度为0),动画帧在0%
style({ height: '*',offset: 1 }) // 200ms后高度自适应展开,元素展开(透明度为1),动画帧在100%
]))
]),[
animate(200,keyframes([
style({ height: '*',// 与之对应,让元素从显示到隐藏一个过渡
style({ height: '0',offset: 1 })
]))
]),])]
})
<!--不传递状态直接调用,用@符号来引用对应的动画-->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" @fadeIn>暂无相关数据信息!!!</h3>
</div>
<!--传递状态的,跟常规的绑定一致-->
<h3 *ngIf="list && list.length === 0" class="text-center text-muted" [@bounceIn]="list.state">暂无相关数据信息!!!</h3>
总结
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |