angularjs - Apply a state class to ui-view to allow different ng animation -

-

i need apply different animations depending on current state using ui-view. following on this question..

i have following code (edit: see plunker preview)

<section ui-view ng-class="stateclass"></section>

stateclass gets applied in each controller e.g: 

.controller('logincontroller', function($scope, $state) {   // set state class name   $scope.stateclass = 'slide-left';   console.log($scope);

this works , class gets added fine - animation wont kick in.

if update ui-view code to:

<section ui-view class="slide-left"></section>

with class hardcoded, works (but can't apply different animations).

does ng-class added after ng-enter? can suggest how achieve animations?

edit>> oddly enough ng-leave animations work fine. css still doesn't apply ng-enter

add ui-view following directive state-class:

.directive('stateclass', ['$state', function($state) {     return {         link: function($scope, $element, $attrs) {             var statename = $state.current.name || 'init',                 normalizedstatename = 'state-' + statename.replace(/\./g, '-');             $element.addclass(normalizedstatename);         }     } }]);

on ng-enter, newly created element add current state name (the state ui-view makes transition to). element going disappear state remains same created before.

for example:

the transition main modal state:

phase 1: main state active:

<ui-view state-class class="state-main ng-scope"></ui-view>

phase 2: run $state.go('modal');

<ui-view state-class class="state-modal ng-animate ng-enter ng-enter-active"></ui-view> <ui-view state-class class="state-main ng-animate ng-leave ng-leave-active"></ui-view>

phase 3: modal state active

<ui-view state-class class="state-modal"></ui-view>

Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

how does one get csharp-sqlite to throw exceptions for duplicates or foreign key constraint violations -

-
i making use of csharp-sqlite. in sqlite database have uniqueness , foreign key constraints. when write "duplicate" table exception not raised , way found check exception use following: var error = sqlitecommand.getlasterror(); i hoping able following: var sqlstring = "some insert sql"; var command = sqlitecommand(sqlstring); command.parameters.add(... parameter...); using (var sqlconnection = new sqliteconnection(connectionstring)) { try { command.executenonquery(); } catch (exception ex) { exception } { sqlconnection.close(); } } the "catch" block never hit, though var error = sqlitecommand.getlasterror(); does return description of error expecting. have idea how solve this, or standard practice using csharp-sqlite library?
Read more

Simple Angular 2 project fails 'Unexpected reserved word' -

-
i trying create simple angular2 project based on ng2do project. using quickstart , have following code... <script src="js/quickstart/dist/es6-shim.js"></script> .... import {component, template, bootstrap, foreach} 'js/quickstart/angular2/angular2'; this gives me following error... uncaught syntaxerror: unexpected reserved word what missing? don't know if helps have been having issues day realised because starting code script reference <script src="app.js"> </script> instead of using <script> system.import('app'); </script> hope helps using in tsconfig { "version": "1.5.0-beta", "compileroptions": { "target": "es6", "module": "amd", "declaration": false, "noimplicitany": false, "removecomments": true, "nolib": fal...
Read more