Plunker example
@Directive({
selector : '[animate-box]',
host : {
'[style.background-color]' : "'transparrent'"
},
exportAs : 'ab'
})
class AnimateBox {
constructor(private _ab: AnimationBuilder, private _e: ElementRef) {}
createAnimation:Function = (forward:boolean, count:number):Animation => {
animation = this._ab.css();
animation.setDuration(1000);
animation.addAnimationClass("test-animation-class");
if(forward) {
animation.setFromStyles({
top: '-20px',
opacity: '100',
})
.setToStyles({
top: '-120px'
opacity: '0',
});
} else {
animation.setFromStyles({
top: '-120px',
opacity: '0',
})
.setToStyles({
opacity: '100',
top: '-20px'
});
}
a = animation.start(this._e.nativeElement);
console.log(a);
a.onComplete(() => { this.onComplete(forward, count);});
};
onComplete:Function = (forward:boolean, count:number) => {
console.log("animation finished");
if(count) {
a = this.createAnimation(!forward, --count);
console.log('a ' + a);
}
};
toggle:Function =(isVisible: boolean = false) => {
this.createAnimation(true,10);
};
}
@Component({
selector: 'my-app',
template: `
<span class="vote"><span animate-box #box="ab" class="test-vote"><i class="fa fa-close"></i></span>1</span>
<button data-tooltip="I’m the tooltip text." (click)="box.toggle(visible = !visible)">Animate</button>
`,
directives : [AnimateBox]
})
export class App {
visible = true;
}
Was ist das Problem? Klassen hinzufügen und entfernen? –
Wie sieht es während der Animation aus? – TheUnreal