引言:给项目管理页面添加搜索和重置的过场动画。


开发过程


1.实现动画。

1.实现表单元素的入场动画。

最先想到的就是利用angular2的animations属性。PS:angular框架严格按照css module标准封装好的属性,自然省心更舒心。

1.在组件中引入animations,并写好进场动画

2. 将动画绑定在HTML模板上

效果暂时如下↓

3.欲详细了解animations,请点击传送门↓

https://angular.cn/docs/ts/latest/guide/animations.html

2.给重置按钮和搜索按钮也来个旋转的特效吧。

最简单的方案就是利用项目中的bootstrap库,在搜索或者重置时改变按钮内部的i标签;

1. 首先改造HTML模板;

2. 改造ts文件

原理简单粗暴 即点击触发函数改变CSS值,2秒后恢复原有CSS值。。

3.实现弹窗效果

如果你想再加个弹窗的话可以利用现成的swalert库;

实现效果如下

image


2.抽象成组件

1.抽象search和reset组件。

1. 新建目录如下

image

2. 引入并在app module上注册 qbc-search-component。

3.编写QbcSearchComponent

1.编写ts文件

2.编写html文件

3. 接下来需要改写项目HTML

4. 然后是项目TS文件

qbc-reset实现方式一样,按上面步骤来,概不赘述

2.抽象animation

1.尝试放入app.component.ts全局复用.

抛出错误,fadeIn没有注册,看来这种方式不行,在没弄清楚angular2动画全局复用机制前,我们先用原生CSS代替。

2. 尝试用css实现.

1.编写css样式文件

2. 直接在项目里引用CSS文件,并在模板里面添加class名fadeIn;

实现效果如下↓
image

3.bootstrap实现。

老铁说效果巨丑,你这都还是定好了时间的。万一服务器卡数据老不出来你就转两秒?改改改。

2.改造动画

1.抽象loading动画组件

1.编写loading html文件

2.编写loading component文件

2.改写reset和search组件

3.改写projects组件

再看下效果


3.优化结构;

然后导师老铁又说animate.css 放在app文件夹里不科学;
既然是全局复用的,那就放在assets/styles/目录下如下图;

修改app.component.ts

最后调整下文件结构 将qbc组件系列转入common文件夹如下图


总结

1.大致了解了animation·运行机制:熟悉trigger,state,transition概念。

2.熟悉了父子组件通讯的三种常规方式:

1.父组件用Input向子组件传值;

2.子组件用Output触发事件向父组件传值;

3.父组件通过ViewChild获取子组件实例直接获取子组件方法.

Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注