How to give slide left animation in angularjs?

Question

HTML

<div class="team_line">
    <p>Text</p>
    <p ng-click="add_con()" class="add_button">Add</p>
</div>
<div ng-show="showModal">
    <p>Add Connection</p>
    <p ng-click="add_con()" class="cancel_button">Cancel</p>
</div>

Angular

$scope.showModal = false;
$scope.add_con = function(){
    $scope.showModal = !$scope.showModal;
};

Here I can show hidden div using angularjs. When I click on add button, I need to show hidden div slide left from right window. How to do this.

Answer 1

Take a look at angular-motion library. It provides many animation feature that you can apply to modal, popovers etc. using the library, here is something you can do to slide the modal from left:

<button type="button" class="btn btn-primary" data-animation="am-slide-left" bs-modal="modal">
    Open the Modal
 </button>

Answer 2

You can also use ngAnimate module from Angular, information on it is here.

ngAnimate adds .ng-enter and .ng-leave classes allowing you to animate as you please.

And here is where you can find specifics of ngAnimate and ngShow together.