title: Angular 2: animation translate3D from the current position
body: <p>I have html elements that are positioned using translate3D (I do not have hands on this code)
  the initial state is eg translate3d (0px, 220px, 0px)</p>
  
  <p>I want to make an animation on this element, another translateX (-100%)</p>
  
  <p>The problem is that the position of the first translate is not known by the second.</p>
  
  <p>according to the documentation Angular 2, it is possible to get the css value of an object with "Automatic Property Calculation".</p>
  
  <p>Example from the doc angular 2:
  <a href="https://angular.io/docs/ts/latest/guide/animations.html" rel="nofollow">https://angular.io/docs/ts/latest/guide/animations.html</a></p>
  
  <pre><code>animations: [
    trigger('shrinkOut', [
      state('in', style({height: '*'})),
      transition('* =&gt; void', [
        style({height: '*'}),
        animate(250, style({height: 0}))
      ])
    ])
  ]
  </code></pre>
  
  <p>So I try to do the same thing but with translate:</p>
  
  <pre><code>    transition('* =&gt; swipe-left',[
          style({ transform: '*'}),
          animate(600, style({ transform: 'translateX(-100%)' }))
      ]),
      transition('* =&gt; swipe-right',[
          style({ transform: '*'}),
          animate(600, style({ transform: 'translateX(+100%)' }))
      )]
  </code></pre>
  
  <p>=> It does not work, the translation is from 0 (top of the page). Y is not recovered</p>
  
  <p>Any ideas? How to translate from the current position?</p>