Angual 2 Animationen: Bild glatt bewegen

Question

Ich habe ein Bild in meine eckige 2-Komponenten-HTML, und ich möchte es an eine andere Position auf dem Bildschirm verschieben, wenn Sie darauf klicken.

<img (tap)="toggleThrow()" [@throw]="throw" 
       src="test.png"> 

Ich habe die folgende Animation Trigger:

trigger('throw', [ 
    state('yes', style({ 
     left: '100px', 
     top: '200px' 
     })), 
     transition('void => yes', animate('600ms ease-in')), 
     transition('yes => void', animate('600ms ease-in')), 
    ]), 

und die folgende Methode nach dem Klicken auf:

toggleThrow() { 
    if (!this.throw) 
     this.throw = 'yes'; 
    else 
     this.throw = null; 
    } 

Jedes Mal, wenn ich das Bild klicken, wird die Bildposition ändert. Das Problem ist, dass es tatsächlich an einem Ort verschwindet und an zweiter Stelle erscheint, statt sich elegant Pixel für Pixel von einem Ort zum anderen zu bewegen.

Wie kann ich ein Bild glatt zwischen X- und Y-Positionen bewegen, um eine werfenartige Animation zu erhalten?

Derzeit erscheint es gerade an der neuen Stelle sofort.

Answer 1

Das Problem ist die Kombination der null und void Staaten und Schlüsselwort.

Sie etwas tun könnte, wie

state('yes', style({ 
    left: '100px', 
    top: '200px' 
    })), 
    transition('* => yes', animate('600ms ease-in')), 
    transition('yes => *', animate('600ms ease-in')), 
]) 

Und

if (!this.throw) this.throw = 'yes'; 
    else this.throw = "";