angularjs - Slide div from left to right in Angular -

in plunk have div should move left right in transition when user clicks on checkbox. instead, div hides , shows in new position. how achieve transition effect in angular?

html:

move <input type="checkbox" ng-model="checked" /> <div class="panel" ng-class="{ 'class1' : checked, 'class2' : !checked }"></div> 

css:

.panel{   position: fixed;   background:orange;   width:100px;   height:30px;   top: 10px; }  .class1{   left: 80px; }  .class2{   left: 240px; }   .class1.ng-show-add-active, .class1.ng-show-remove-active { transition: ease-in-out 2s; }   .class2.ng-show-add-active, .class2.ng-show-remove-active { transition: ease-in-out 2s; } 

javascript:

var app = angular.module("app", ['nganimate']); app.controller('ctl', function($scope) {   $scope.checked = true; }); 

this answer: need use -add , -remove after class name.

plunk