title: javascript/css animation from dom node to dom node
body: <p><code>ng-animate-ref</code> allows to create <strong>a transition from one dom node to another</strong>.</p>
  
  <p>ng-animate uses all the css styles like <code>position</code>, <code>font-size</code>, <code>font-color</code> and more from the first dom element and the second dom element and creates a css 3 animation to move the element from state <code>a</code> to state <code>b</code>.</p>
  
  <p>This is exactly what I need but unfortunately I can't use Angular 1 in the current project.</p>
  
  <p>Is there any reusable way to achieve the same css3 animation without moving all styles from my css files to javascript?</p>
  
  <p>To illustrate the problem please see the following example.
  As you can see the example has <strong>no custom javascript animation code</strong> at all but only javascript code which handles the state logic switching elements from list <code>a</code> to <code>b</code>.</p>
  
  <p>The animation definition is written <strong>in pure css</strong>.</p>
  
  <p>Demo:<br>
  <a href="https://codepen.io/jonespen/pen/avBZpO/" rel="noreferrer">https://codepen.io/jonespen/pen/avBZpO/</a></p>
  
  <p>Preview:<br>
  <a href="https://i.stack.imgur.com/5hJIL.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/5hJIL.gif" alt="Preview of the demo"></a></p>