《Angular之渐入动画》

最新推荐文章于 2021-09-26 19:16:40 发布

杨晓风-linda

最新推荐文章于 2021-09-26 19:16:40 发布

阅读量845

点赞数

分类专栏： ITOO前端研究前端工程化

本文链接：https://blog.csdn.net/yxf15732625262/article/details/78451455

版权

ITOO前端研究同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

前端工程化

50 篇文章 7 订阅

订阅专栏

前言：

承接ITOO即将胜利之风，图书馆项目先进行了开门红。在图书馆这次项目开发中，有很多细节之处得到了验证，接下来请听小编谈谈这渐入动画效果实现。

正文：

以ITOO为例，三步搞定。

第一。下载动画库

第二，登录组件呈现渐入效果：

1.修改：login.component.ts

import { fadeIn } from '../animations/fade-in';
import {
  FormBuilder,
  FormGroup,
  Validators
} from '@angular/forms';

import { InterceptorService } from '../shared/interceptor.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [ AuthGuardService ],
  animations: [ fadeIn ]
})

2.编辑login.component.html

 <body [@fadeIn]></body>

在相应的标签里面引入即可。

结语：

一款好的产品上线宏观把控比不可少，微观掌握不可或缺，细节之处考量周全。

杨晓风-linda

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
14
评论
《Angular之渐入动画》

前言：承接ITOO即将胜利之风，图书馆项目先进行了开门红。在图书馆这次项目开发中，有很多细节之处得到了验证，接下来请听小编谈谈这渐入动画效果实现。正文：以图书馆为例，四步搞定。第一。下载动画库-@angular/animations结语：一款好的产品上线宏观把控比不可少，微观掌握不可或缺，细节之处考量周全。
复制链接

扫一扫

专栏目录