所以我一直在寻找和尝试几个小时。我试图让html变为淡入淡出，但它总是不透明：当ngFor显示它时立即显示1，并且永远不会淡化它。 FadingOut不是问题。
@Component({
selector:'c-translation-wizard',
templateUrl: 'scripts/translationWizard/TTranslationWizard.html',
animations: [
trigger('flyInOut', [
state('active', style({ opacity: 1 })),
state('inactive', style({ opacity: 0 })),
transition('active => inactive', [
style({ opacity: 0 }),
animate('0.7s ease-out')
]),
transition('inactive => active', [
animate('0.7s ease-in', style({ opacity: 1 }))
]),
transition('void => *', [
style({ opacity: 1 }),
animate('0.7s ease-in')
]),
transition('* => void', [
animate('0.7s ease-out', style({ opacity: 0 }))
]),
transition('void => active', [
style({ opacity: 1 }),
animate('0.7s ease-in')
]),
transition('inactive => void', [
animate('0.7s ease-out', style({ opacity: 0 }))
])
])
])
export class CTranslationWizard implements InterfaceLocalStorage, OnInit, OnDestroy {
results : CTranslationWizard_results[];
result$ : any;
importExport : string;
type: string;
errors : string[] = [];
log : Logger;
sHtsTranslation : SHtsTranslation;
toggle = false;
gA : any;
constructor(GoogleAnalytics : GoogleAnalytics,
log : Logger,
sHtsTranslation : SHtsTranslation
){
this.log = log;
this.gA = GoogleAnalytics;
this.sHtsTranslation = sHtsTranslation;
this.importExport = "export";
this.results = [];
this.type = '-';
//LocalStorage.getItem(this);
}
setImportExport(value : string){
this.importExport = value;
}
onlyNumberic(ip:string) : boolean{
let isNumber : boolean = /^\d+$/.test(ip);
return isNumber;
}
isEightTenDigits(ip:string) : boolean{
let isET : boolean = (ip.length == 8 || ip.length == 10);
return isET;
}
isSixDigits(ip:string) : boolean {
let isET : boolean = (ip.length == 6);
return isET;
}
isFiveDigits(ip:string) : boolean{
let isET : boolean = ip.length == 5;
return isET;
}
errorText() {
let err : string[] = [];
err.push("An SITC number can only be 5 digits long");
err.push("An NAICS number can only be 6 digits long");
err.push("An HTC number can only be 8 or 10 digits long.");
return err;
}
getType(value : string) : string {
if(this.onlyNumberic(value)) {
let val : number = parseInt(value);
let type : string = getType(val);
return (type ? type : "-");
} else {
return '-';
}
}
validateInput(value : string) : string[] {
let err : string[] = [];
if(!this.onlyNumberic(value)){
err.push("Only numeric characters maybe used.");
return err;
}
let eightTen : boolean = this.isEightTenDigits(value);
if(eightTen) {
return [];
}
let six : boolean = this.isSixDigits(value);
if(six) {
return [];
}
let five : boolean = this.isFiveDigits(value);
if(five) {
return [];
}
return this.errorText();
}
submit(value : string) {
this.gA.pageEvent(
"info",
"click",
"translationWizard_submitButton",
);
this.errors = this.validateInput(value);
if(this.errors.length == 0){
let val : number = parseInt(value);
//do query for results, delete this
//hit service get result
//this.results.push(new MImportExport('htic',12345678,this.outputType, 12345, 12345));
this.sHtsTranslation.htsTranslation(val, this.importExport, 101);
//save the new model to local storage
//LocalStorage.setItem(this);
}
}
removeByIndex(index : number){
this.gA.pageEvent(
"info",
"click",
"translationWizard_removeButton"
);
this.results.splice(index,1);
}
removeAll(){
this.gA.pageEvent(
"info",
"click",
"translationWizard_removeAllButton"
);
this.results.splice(0);
}
//OnInit, OnDestroy interfaces
ngOnInit(){
this.result$ = this.sHtsTranslation.htsTranslation$.subscribe(
(modelHts : ModelHts) => {
this.log.debug(this, "pushing modelHts into results");
this.results.unshift(modelHts);
});
this.log.debug(this, "sHtsTranslation subscribed");
}
ngOnDestroy(){
if(this.result$){
this.result$.unsubscribe();
this.log.debug(this, "sHtsTranslation unsubscribed");
}
}
//interface LocalStorage
getExclusionList(): string[] {
return ['errors','outputType', 'gA', 'sHtsTranslation'];
}
}
export interface CTranslationWizard_results {
inputNumber : number;
inputType : string;
resultsForIE : [{
htc8 : number,
htc10 : number,
sitc : number,
naics : number
}]
}
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Input Type</th>
<th>Input Number</th>
<th>I/E</th>
<th class="fixed">SITC</th>
<th class="fixed">NAICS</th>
<th class="fixed">HTC-8</th>
<th class="fixed">HTC-10</th>
<th>
<button
(click)="removeAll()"
type="button"
id="translationWizard_removeAllButton"
class="btn btn-default remove start end">
<span
class="glyphicon glyphicon-trash"
aria-hidden="true">
</span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let modelHts_ of results; let i = index;"
[@flyInOut]="modelHts_.state">
<th scope="row">{{i}}</th>
<td>{{modelHts_.inputType}}</td>
<td>{{modelHts_.inputNumber}}</td>
<td>{{modelHts_.importExport}}</td>
<td class="table-nested" colspan="4">
<table class="table table-bordered table-hover">
<tr *ngFor="let resultForIE of modelHts_.resultsForIE;">
<td class="fixed">{{resultForIE.sitc}}</td>
<td class="fixed">{{resultForIE.naics}}</td>
<td class="fixed">{{resultForIE.htc8}}</td>
<td class="fixed">{{resultForIE.htc10}}</td>
</tr>
</table>
</td>
<th>
<button
(click)="removeByIndex(i)"
type="button"
id="translationWizard_removeButton"
class="btn btn-default remove start end">
<span
class="glyphicon glyphicon-remove"
aria-hidden="true">
</span>
</button>
</th>
</tr>
</tbody>
</table>
在上面的模板中，这段代码是在添加到数组时它应该淡入的地方。
<tr *ngFor="let modelHts_ of results; let i = index;"
[@flyInOut]="modelHts_.state">
任何想法？感谢
答案 0 :(得分：1)
动画模块的新功能但是，我不想将视图状态变量嵌入到来自服务器的数据模型中，因为使用该模型可能有很多视图（从我的观点来看不是一个好主意）
关于VOID状态和NgFor，动画似乎很混乱。我会尽量让这个解释变得简单。
VOID状态是未应用角度变换的html +样式。在这种情况下，ngFor将元素添加到dom，然后更改状态并应用样式以转到该状态。如果[@flyInOut] ='active'且style =“opacity：0;”在元素上（当由ngFor添加时）它将转换为不透明度：1。
然而，当通过ngFor从dom中删除时，它不会转换回void状态。相反，我必须手动控制状态转换变量，并设置一个计时器，以便在动画完成后将其从数组中移除（ngFor）。
以上是对上述代码的最终更改，这会导致进出的工作转换。
<tr #localRow
style="opacity: 0"
title="true"
*ngFor="let modelHts_ of results; let i = index;"
[@flyInOut]="localRow.title">
我将元素上的“title”绑定为控制局部变量状态的变量（不需要将状态控制器嵌入到modelHts _中）。
<button
(click)="localRow.title = removeByIndex(i)"
type="button"
id="translationWizard_removeButton"
class="btn btn-default remove start end">
<span
class="glyphicon glyphicon-remove"
aria-hidden="true">
</span>
</button>
删除元素的按钮会更改标题/状态。
state('true', style({ opacity: 1 })),
state('false', style({ opacity: 0 })),
transition('void => true', [
animate('.75s')
]),
transition('true => void', [
animate('.75s')
]),
transition('true => false', [
animate('.75s')
]),
transition('false => true', [
animate('.75s')
])
removeByIndex(index : number) : boolean{
this.gA.pageEvent(
"info",
"click",
"translationWizard_removeButton"
);
setTimeout(()=> {
this.results.splice(index,1);
},1000);
return false;
}
在控制器中，设置超时以在动画完成转换状态后从数组中删除项目。
任何人都知道我哪里出错了？或者这是ngFor的错误（应该转换到VOID状态）。
此外，其他有关未将状态嵌入模型的建议将受到赞赏......通过评论。
答案 1 :(得分：0)
没有控制器的代码，很难说。我认为它与modelHts_.state有关。它看起来像什么？
如果你只关心输入动画，你也可以[@flyInOut]="true"。