I am looking to add animation to my web app. When clicked, I want to move only the ID table column from one div to another div while hiding the other column. However, I am struggling with figuring out how to animate the movement of the ID column (from the green div) to the red div. Here is the JSFIDDLE link for reference: https://jsfiddle.net/q4eotzb0/6/
<body>
<script type="text/javascript">
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;
}
});
<br />
<br />
<div class="meni col-lg-2 col-md-2 col-sm-12 col-xs-12">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</div >
<div class="container-fluid col-lg-10 col-md-10 col-sm-12 col-xs-12">
<div class="test col-lg-4 col-md-4 col-sm-12 col-xs-12" ng-class="{'divOpen': IsVisible}">
<div ng-if="!IsVisible">
ID<br>
50<br>
51<br>
52<br>
</div>
<div ng-if="IsVisible">
MAPs
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="testtest">
<input type="button" ng-if="!IsVisible" value="Back" ng-click="ShowHide()" />
<table class="table" ng-if="IsVisible">
<tr>
<td>ID</td>
<td>NAME</td>
<td>LOCATION</td>
<td>No</td>
</tr>
<tr>
<td>50</td>
<td>NAME</td>
<td>LOCATION</td>
<td> <input type="button" value="SHOW/HIDE" ng-click="ShowHide()" /></td>
</tr>
<tr>
<td>51</td>
<td>NAME</td>
<td>LOCATION</td>
<td> <input type="button" value="SHOW/HIDE" ng-click="ShowHide()" /></td>
</tr>
<tr>
<td>52</td>
<td>NAME</td>
<td>LOCATION</td>
INFO item
</table>
</div>
</div>
</div>
.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;
}