title: Transition from one div to another div
body: <p>I need to make animation on my web app. On click, I need to move only ID table column from one div to another div, another column needs to hide. But with animation. I make JSFIDDLE for this, but I can't figure how to do animation for MOVING column ID (from green div) to red div. <a href="https://jsfiddle.net/q4eotzb0/6/" rel="nofollow noreferrer">https://jsfiddle.net/q4eotzb0/6/</a></p>
  
  <pre><code>&lt;body&gt;
  &lt;script type="text/javascript"&gt;
  var app = angular.module('MyApp', [])
  app.controller('MyController', function($scope) {
    //This will hide the DIV by default.
    $scope.IsVisible = true;
    $scope.ShowHide = function() {
      //If DIV is visible it will be hidden and vice versa.
      $scope.IsVisible = !$scope.IsVisible;
    }
  });
  </code></pre>
  
  <p>
    </p>
  
  <pre><code>&lt;br /&gt;
  &lt;br /&gt;
  &lt;div class="meni col-lg-2 col-md-2 col-sm-12 col-xs-12"&gt;
   &lt;ul&gt;
    &lt;li&gt;home&lt;/li&gt;
    &lt;li&gt;home&lt;/li&gt;
    &lt;li&gt;home&lt;/li&gt;
    &lt;li&gt;home&lt;/li&gt;
    &lt;li&gt;home&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div &gt;
  &lt;div class="container-fluid col-lg-10 col-md-10 col-sm-12 col-xs-12"&gt;
  
  &lt;div class="test col-lg-4 col-md-4 col-sm-12 col-xs-12" ng-class="{'divOpen': IsVisible}"&gt;
   &lt;div ng-if="!IsVisible"&gt;
      ID&lt;br&gt;
      50&lt;br&gt;
      51&lt;br&gt;
      52&lt;br&gt;
   &lt;/div&gt;
   &lt;div ng-if="IsVisible"&gt;
    MAPs
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-8 col-md-8 col-sm-12 col-xs-12"&gt;
   &lt;div class="testtest"&gt;
   &lt;input type="button" ng-if="!IsVisible" value="Back" ng-click="ShowHide()" /&gt;
     &lt;table class="table" ng-if="IsVisible"&gt;
      &lt;tr&gt;
      &lt;td&gt;ID&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
      &lt;td&gt;LOCATION&lt;/td&gt;
      &lt;td&gt;No&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;50&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
      &lt;td&gt;LOCATION&lt;/td&gt;
      &lt;td&gt; &lt;input type="button" value="SHOW/HIDE" ng-click="ShowHide()" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;51&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
      &lt;td&gt;LOCATION&lt;/td&gt;
      &lt;td&gt; &lt;input type="button" value="SHOW/HIDE" ng-click="ShowHide()" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;52&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
      &lt;td&gt;LOCATION&lt;/td&gt;
     INFO item
     &lt;/table&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>.test {
  background: red;
  width: 50px;
  height: 350px;
  -webkit-transition: width 2s;-moz-transition: width 2s ease-in-out;-ms-
  transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;transition: width 2s;
  }
  
  
  .divOpen{
   width: 100px;
   }
  .testtest{
   background: green;
   height: 350px;
   width: auto;
   }
  .meni {
   background-color: grey;
   height: 350px;
   }
  </code></pre>