title: How can keep Animate when I click?
body: <p>First, I am not good at English so Please understand me!</p>
  
  <p>I try to make similar with Carousel
  I write my code below </p>
  
  <pre><code> trigger('moveImage', [
    state('left', style({
      transform: 'translateX(0)'
    })),
    state('right', style({
      transform: 'translateX(-555px)'
    })),
    transition('left =&gt; right', animate('300ms, ease-out')),
    transition('right =&gt; left', animate('300ms, ease-in'))
  ])
  </code></pre>
  
  <p>should I use jQuery or do other?
  I really want to change 'transform' valid when I click button</p>
  
  <p>e.g>
  1. click once 
  translateX(0) -> translateX(-100)</p>
  
  <ol start="2">
  <li>click twice
  translateX(-100) -> translateX(-200)</li>
  </ol>
  
  <p>... and more..</p>