NodeJs Forum News: [AngularJS] ngAnimate with ngView - duplicated HTML content during the animation and 'undefined is not a function'

I'm struggling with transition effect between different views.

Everything seems to be fine but only till somebody won't click menu (change view) before previous animation ends.

If you'll use navigation before css transition is finished it'll affect that `ngView` html element will be duplicated and then browser console throwing error: `undefined in not a function` in angular-animate.js in line 1348.

At this place in angular-animate.js you can find:

  forEach(animationsToCancel, function(operation) {
       operation.cancel(); // this is our undefined
  });

This issue you can see here when you'll quickly switch between Dashboard and Users.

Appreciate any help!



    var app = angular.module('demo3', ['ngAnimate', 'ngRoute']);




    app.config(function ($routeProvider) {

        $routeProvider.when('/', {

            templateUrl: '/views/view-dashboard.html',

//            controller: 'dsbhController'

        }).when('/dashboard', {

            templateUrl: '/views/view-dashboard.html',

        }).when('/users', {

            templateUrl: '/views/view-users.html',

        });

    });

HTML



<!DOCTYPE html>

<html ng-app="demo3">

    <head>

        <!-- ... -->

    </head>

    <body class="template" ng-controller="TemplateController as Template" ng-class="{'on': Template.loged_in}">

        <!-- ... -->

        <div class="mainFlexCont" ng-class="{'open' : Template.isMenuOpen}">            

            <left-menu class="menuFlexCont menu"></left-menu>            

            <div class="contentFlexCont animate-view" ng-view></div>            

        </div>

        <!-- global JS -->      

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>        

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-animate.js"></script>        

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-route.js"></script>                

        <!-- ... -->

        <script src="js/app/app.js" type="text/javascript"></script>                    

    </body>

</html>

CSS

.animate-view.ng-enter, .animate-view.ng-leave {

flex: none;

position: absolute;

top: 0;

left: 40px;

width: calc(100% - 40px);

-webkit-transition: transform .4s ease-out;

-moz-transition: transform .4s ease-out;

-ms-transition: transform .4s ease-out;

transition: transform .4s ease-out;

overflow: hidden;

}

.open .animate-view.ng-leave,

.open .animate-view.ng-enter{

left: 180px;

width: calc(100% - 180px);

}

.animate-view.ng-enter{

-webkit-transform: translate(100%,0);

-moz-transform: translate(100%,0);

-ms-transform: translate(100%,0);

transform: translate(100%,0);

}

.animate-view.ng-enter.ng-enter-active {

-webkit-transform: translate(0,0);

-moz-transform: translate(0,0);

-ms-transform: translate(0,0);

transform: translate(0,0);

}

.animate-view.ng-leave{

-webkit-transform: translate(0,0);

-moz-transform: translate(0,0);

-ms-transform: translate(0,0);

transform: translate(0,0);

}

.animate-view.ng-leave.ng-leave-active {

-webkit-transform: translate(-100%,0);

-moz-transform: translate(-100%,0);

-ms-transform: translate(-100%,0);

transform: translate(-100%,0);

}

NodeJs Forum News

2015년 1월 5일 월요일

[AngularJS] ngAnimate with ngView - duplicated HTML content during the animation and 'undefined is not a function'

댓글 없음:

댓글 쓰기