Angular2搜索和重置按钮过场动画(2)

//projects.html //将原先的搜索框代码部分用qbc-search代替。 <qbc-search (searchEmitter)=search(pagecount.value,1,$event)></qbc-search> //projects.html //将原先的搜索框代码部分用qbc-search代替。 <qbc-search (searchEmitter)=search(pagecount.value,1,$event)></qbc-search>

然后是项目TS文件

//projects.component.ts // 其实也可以直接在模板中调用getProjects方法，差不多。一个是后期要修改模板，一个是要修改TS文件。 search(pageSize, page, name) { this.getProjects(pageSize, page, name); } //projects.component.ts // 其实也可以直接在模板中调用getProjects方法，差不多。一个是后期要修改模板，一个是要修改TS文件。 search(pageSize, page, name) { this.getProjects(pageSize, page, name); }

qbc-reset实现方式雷同就不赘述了。下面看看animations如何复用。

// 先试试可不可以放入app.component.ts animations: [ trigger('fadeIn', [ state('active', style({transform: 'translateX(0)', opacity: 1})), transition('void => *', [ style({transform: 'translateX(500px)', opacity: 0}), animate('1s ease-in-out') ]) ]), ] // 先试试可不可以放入app.component.ts animations: [ trigger('fadeIn', [ state('active', style({transform: 'translateX(0)', opacity: 1})), transition('void => *', [ style({transform: 'translateX(500px)', opacity: 0}), animate('1s ease-in-out') ]) ]), ] //projects.html [@fadeIn] = "state" // error The provided animation trigger "c1#fadeIn" has not been registered! //projects.html [@fadeIn] = "state" // error The provided animation trigger "c1#fadeIn" has not been registered!

看来这种方式不行,在没弄清楚angular2动画全局复用机制前，我们先用原生CSS代替。

建立animation.css

.fadeIn{ animation: fadeIn ease-in-out 1.5s 1; // 参数依次为： 动画名称 缓动函数 动画时间 动画运行次数 } @keyframes fadeIn{ 0% { opacity: 0; transform: translateX(500px); } 100%{ opacity: 1; transform: translateX(0); } } .fadeIn{ animation: fadeIn ease-in-out 1.5s 1; // 参数依次为： 动画名称 缓动函数 动画时间 动画运行次数 } @keyframes fadeIn{ 0% { opacity: 0; transform: translateX(500px); } 100%{ opacity: 1; transform: translateX(0); } }

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

//projects.component.ts styleUrls: ['./projects.css', '../animation.css'] //projects.html <tr *ngFor="let project of projects"> //projects.component.ts styleUrls: ['./projects.css', '../animation.css'] //projects.html <tr *ngFor="let project of projects">

实现效果如下

老铁还有没有更简单的，我不会CSS3，别跟我整那些幺蛾子。

当然有！！！

// projects.html // bootstrap库帮你写好了，填写class就好 <tr *ngFor="let project of projects"> // projects.html // bootstrap库帮你写好了，填写class就好 <tr *ngFor="let project of projects">

以上所述是小编给大家介绍的Angular2搜索和重置按钮过场动画，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: