javascript - AngularJS - how to animate ng-include that is dynamically compiled and added -
i have following angularjs (v1.1.4) code , trying fade-in (animate) ng-include when added dom. doing wrong? also, if can suggest better way of passing add/set/remove commands directive rather watching 'action' property, appreciated.
plunker here: http://plnkr.co/edit/rcgpi0n8fgwj6o01mp3b?p=preview
index.html
<!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"> <title>angularjs plunker</title> <link rel="stylesheet" href="styles.css" /> <script>document.write('<base href="' + document.location + '" />');</script> <script src="http://code.angularjs.org/1.1.4/angular.js"></script> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> <button ng-click="loadpartial('partial1.html')">click load partial 1</button> <button ng-click="loadpartial('partial2.html')">click load partial 2</button> <button ng-click="loadpartial('partial3.html')">click load partial 3</button> <div views></div> </body> </html> app.js
var app = angular.module('plunker', []); app.controller('mainctrl', ['$scope', 'viewsapi', function(scope, viewsapi) { scope.loadpartial = function (name) { viewsapi.addview(name); }; }]); app.factory('viewsapi', function () { return { views: [], action: null, addview: function (viewname, options) { var view = { name: viewname, options: options }; this.action = { type: 'add', view: view }; }, setview: function (viewname, options) { var view = { name: viewname, options: options }; this.action = { type: 'set', view: view }; }, removeview: function () { this.action = { type: 'remove' }; } } }); app.directive('views', ['$compile', function (compile) { return { restrict: 'a', scope: {}, replace: true, template: '<div class="views"></div>', controller: ['$scope', 'viewsapi', function (scope, viewsapi) { scope.api = viewsapi; scope.$watch('api.action', actionchange, true); function actionchange (action) { if (!action) return; if (action.type == 'add') { var view = scope.addview(action.view); scope.api.views.push(view); } else if (action.type == 'set') { scope.setview(action.view); } else if (action.type == 'remove') { scope.removeview(); } } }], link: function (scope, elm) { scope.addview = function (view) { var v = compile('<div class="view-wrapper" ng-include="\'' + view.name + '\'" ng-animate="fade"></div>')(scope); elm.append(v); return v; }; scope.setview = function (view) { }; scope.removeview = function () { }; } }; }]); styles.css
.fade-enter-setup { -webkit-transition: 3s linear; opacity: 0; } .fade-enter-setup { opacity: 1; } partial1.html
<div>hello partial 1</div> partial2.html
<div>partial 2-------------------</div> partial3.html
<div> 33333333333333333333333333 <br /> partial 3 <br /> 33333333333333333333333333 </div>
if still interested, accidently created plunker today, should answer long ago question.
now latest 1.2 stable release, if angular finds nganimate module, add specific css classes dom, when built-in directive ng-if, ng-switch, ng-view detected, child has changed. classes trigger css transitions, if view partial takes long time load, animation start, when loaded.
index.html:
<div class="view-animate-container"> <div class="well slide" ng-view> <!-- view container. asynchronously loaded view templates placed here --> </div> </div> app.js:
angular.module('myapp', ['ngroute', 'nganimate']) .run(function($rootscope, $location){ $rootscope.matchesroute = function() { for(var i=0; i<arguments.length; i++) { if($location.path() === arguments[i]) { return true; } } return false; } }) .config(function($routeprovider) { $routeprovider .when('/bellsandwhistles', {templateurl: 'bellsandwhistles.html', controller: angular.noop()}) .when('/about', {templateurl: 'about.html', controller: angular.noop()}) .otherwise({redirectto: '', templateurl: 'home.html'}); }); styles.css:
html, body{ height: 100%; } .view-animate-container { position: relative; overflow: hidden; height:100%; } .view-animate-container > .slide.ng-enter, .view-animate-container > .slide.ng-leave { -webkit-transition: ease 0.5s; -moz-transition: ease 0.5s; -o-transition: ease 0.5s; transition: ease 0.5s; width: 100%; position:absolute; } .view-animate-container > .slide.ng-enter { left:100%; opacity: 0; } .view-animate-container > .slide.ng-enter.ng-enter-active { left:0; opacity: 1; } .view-animate-container > .slide.ng-leave.ng-leave-active { left: -100%; opacity: 0; } 
Comments
Post a Comment