javascript - Angular6 - 更改值时的动画
问题描述
我在谷歌上搜索了如何做我想做的事情并尝试了一些东西但没有任何效果,我发现了很多 AngularJS 教程但不是 Angular6 .. 所以我希望你能帮助我。
当我的数组的值发生变化时(点击时),我想淡化,所以我下载了 ng-animate 但它没有给我我正在寻找的行为。目前,我有两个组件,所以第一个:
HTML:
<div style="text-align: center; margin: 20px 0">
<div class="buttonSelector" *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)"
[ngClass]="{'selected': select.title === selectedArray.title.toUpperCase() }">
<p>{{ select.title }}</p>
</div>
</div>
<app-infoapp [selectedArray]="selectedArray"></app-infoapp>
在那里,我通过将变量发送到 getSelectArray() 来更改我的 selectedArray,然后将其发送到我的“app-infoapp”组件。在我的“app-infoapp”组件上,我们可以找到:
import {Component, Input, OnInit} from '@angular/core';
import { trigger, transition, useAnimation } from '@angular/animations';
import {bounce, fadeIn} from 'ng-animate';
@Component({
selector: 'app-infoapp',
templateUrl: './infoapp.component.html',
styleUrls: ['./infoapp.component.css'],
animations: [
trigger('fade', [transition('* => *', useAnimation(fadeIn, {delay: 0.2}))])
]
})
export class InfoappComponent implements OnInit {
@Input() selectedArray;
fade: any;
constructor() {
}
}
所以现在当我刷新我的页面时,该组件正在褪色,这很酷,但是当我通过单击按钮更改我的数组以便将另一个数组发送到我的“app-infoapp”组件时,它不会再次设置动画。
我希望我很清楚,你将能够帮助我。
如果您需要更多信息或者如果我不清楚告诉我,我会尽快回答。
谢谢。
解决方案
我用您的示例代码尝试了我向您建议的相同示例(kdechant.com/blog/angular-animations-fade-in-and-fade-out),它正在工作:
在应用模块(app.module.ts)中导入 BrowserAnimationsModule:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [...],
imports: [BrowserAnimationsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
父组件.html
<div style="text-align: center; margin: 20px 0">
<div *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)">
<p>{{ select.title }}</p>
</div>
</div>
<app-infoapp [selectedArray]="selectedArray"></app-infoapp>
父组件.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
public buttonSelector = [];
public selectedArray = [];
constructor() { }
ngOnInit() {
this.buttonSelector = [{title: 'save'}, {title: 'add'}, {title: 'edit'}, {title: 'delete'}];
}
getSelectArray(title: string) {
this.selectedArray.push({title:title});
}
}
info-app.component.html
<div class="info" *ngFor="let selected of selectedArray" [@simpleFadeAnimation]="'in'">
{{ selected.title }}
</div>
info-app.component.ts
import {Component, Input, OnInit} from '@angular/core';
import { trigger, transition, state, style, animate } from '@angular/animations';
@Component({
selector: 'app-infoapp',
templateUrl: './info-app.component.html',
styleUrls: ['./info-app.component.css'],
animations: [
trigger('simpleFadeAnimation', [
state('in', style({opacity: 1})),
transition(':enter', [
style({opacity: 0}),
animate(600 )
]),
transition(':leave',
animate(600, style({opacity: 0})))
])
]
})
export class InfoAppComponent implements OnInit {
@Input() selectedArray = [];
constructor() {}
ngOnInit() {}
}
推荐阅读
- php - 数据库未连接到生产环境
- python - 获取列中某个唯一值的数量
- matlab - 使用当前时间保存工作区。MATLAB
- .htaccess - htaccess中的重写和重定向url问题
- java - Hive 选择问题:java.lang.IncompatibleClassChangeError
- visual-studio - 替换 Visual Studio 菜单中的默认移动键
- c++ - 此序列背后的逻辑已构建,但出现问题?
- java - 自定义溢出菜单在 android API 21 和 23+ 中不会给出相同的结果
- makefile - 尝试运行 make 命令时出错
- python - 如何将元组中的字典列表转换为 pandas DataFrame?