0
所以我一直在尋找並嘗試幾個小時。我試圖讓HTML淡入淡出，但它總是不透明：1當ngFor顯示它，並且永不淡化它。 FadingOut不是問題。無法獲得angular2動畫FadeIn
@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">
任何想法？謝謝
我曾嘗試在/之前設置[@flyInOut] =「true」，但它不起作用。 –
除此之外，我還以爲動畫只關注數組（在本例中）以及組件動畫元數據？ –