Angualr 2 анимации: перемещайте изображение плавно

Question

Я поместил изображение в свой угловой компонент 2 html, и я хотел бы переместить его в другое положение на экране при нажатии на него.

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

я добавил следующую анимацию триггер:

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

и следующий метод после нажатия:

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

Всякий раз, когда я нажимаю изображение, изображение меняет положение. Проблема в том, что она фактически рассеивается в одном месте и появляется во втором месте, вместо этого элегантно перемещая пиксель от одного места к другому.

Как я могу перемещать изображение плавно между позициями X и Y, чтобы получить анимацию, подобную броску?

В настоящее время он просто появляется в новом месте безмятежно.

Answer 1

Вопрос состоит из null и void состояния и ключевое слово.

Вы могли бы сделать что-то вроде

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

И

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