2016-04-12 23 views
0

Sagen wir, ich habe eine Schaltfläche:Animieren ein Bild mit kantigem 2

<button class="btn btn-primary" (click)="moveImage()">Move image!</button> 

und einige Bild:

<img src="ball.png"> 

ich das gefunden habe: http://www.w3schools.com/angular/angular_animations.asp konnte aber keine dokumentierten Version finden von Angular 2 für diese Bibliothek.

Ich sah dies: https://angular.io/docs/ts/latest/api/animate/, aber es sagt mir nichts.

Wie kann ich angular 2 verwenden, um das Ballbild zu springen oder mit CSS-Übergängen zu verschieben?

Alle Referenzen?

+0

Was ist das Problem? Klassen hinzufügen und entfernen? –

+0

Wie sieht es während der Animation aus? – TheUnreal

Antwort

2

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; 
} 
+0

Wow! Das ist viel Winkelcode für einen Ballsprung. Obwohl es ein großartiges Beispiel ist, das mir absolut helfen wird, Objekte mit eckigen 2 zu animieren. Danke! – TheUnreal

+0

Animation für Angular2 ist in Arbeit –

Verwandte Themen