JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl as vm">
  <button ng-click='vm.move()'>Move</button>
  <div class="slide" move='vm.side'></div>
</div>

CSS

.slide{
  width: 50px;
  height: 40px;
  background: blue;
  margin-left: 0;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease
}
.slide.left{
  margin-left: 0;
}
.slide.right{
  margin-left: 200px;
}

JavaScript

angular.module('app', [])
	.controller('AppCtrl', function () {
			var vm = this;
      vm.side = 'left';
      vm.move = function () {
      	vm.side = vm.side == 'left'? 'right' : 'left';
      }
	})
  .directive('move', function () {
  	return {
    	restrict: 'A',
      scope: {move: '='},
      link: function (scope, element, attrs, controller) {
      	scope.$watch('move', function (side) {
        	angular.element(element).addClass(side);
          var toRemove = side == 'left'? 'right' : 'left';
          angular.element(element).removeClass(toRemove);
        })
      }
    }
  })