javascript - add slide animation for angular directives -

javascript - add slide animation for angular directives -

i have dynamic loading htmls, created directive inorder load html template.

main.html:

<button class="btn" ng-click='toggle()'></button> <div class="anim"> <app show='modalshown'></app> </div>

sub.html:

<div id="sub"></div>

controller:

$scope.toggle = function() { $scope.modalshown = !$scope.modalshown; var htmlcontent = $('.addtl'); htmlcontent.load('sub.html'); $compile(htmlcontent.contents())($scope); };

app.js:

app.directive('app', function() { homecoming { restrict: 'e', scope: { show: '=' }, replace: true, // replace template below transclude: true, // want insert custom content within directive link: function(scope, element, attrs) { scope.dialogstyle = {}; if (attrs.width) scope.dialogstyle.width = attrs.width; if (attrs.height) scope.dialogstyle.height = attrs.height; scope.hidemodal = function() { scope.show = false; }; }, template: "<div class='ng-modal check-element animate-show' ng-show='show' >" + "<div class='ng-modal-dialog' ng-style='dialogstyle'>" + "<div class='ng-modal-close' ng-click='hidemodal()'>close</div>" + "<div class='addtl'></div>" + "</div>" + "<div class='ng-modal-dialog-content' ng-transclude></div>" + "</div>" + "</div>" }; });

onclick of button corresponding html template open , close. trying add together effect of slide , downwards inorder create template beautiful.

can help me out.

seeing hiding , showing modal using ng-show, can utilize built in css animation classes provide transitions (e.g. .ng-hide-add, .ng-hide-remove).

have @ more detail: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngshow-and-ng-hide

also, don't forget include nganmiate module in app.

.animate-show-animation.ng-hide-add, .animate-show-animation.ng-hide-remove { -webkit-transition:0.5s linear all; transition:0.5s linear all; /* remember add together */ display:block!important; opacity:1; } .animate-show-animation.ng-hide { opacity:0; }

javascript jquery angularjs angularjs-directive