ngAnimate transition scrolls current page to top in ui-view

Question

When I click next button which is down below on one of my views to go to another state, the current page where I'm at scrolls back to the top then finally ngAnimate and css starts to slide the 2 partials. However, I don't like the resulting transitions as it causes somewhat a flickering effect.

What I'd like to happen is that when I click next button, I'd like to maintain the position of where current view is on the screen, then start the sliding.

Is there something I need to change on my code? autoscroll="false" on my ui-view doesn't seem to help.

Here is my new css.

 #content-view.ng-enter, #content-view.ng-leave {
    position: absolute;
    // width: 100%;
    -webkit-transition:all 2s ease-in-out;
    transition:all 2s ease-in-out;
  }
  #content-view.ng-enter {
    // transform: translateX(100%);
    // -webkit-transform: translateX(100%);
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
  }
  #content-view.ng-enter-active {
    // transform: translateX(0);
    // -webkit-transform: translateX(0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  #content-view.ng-leave {
    opacity: 1;
    // transform: translateX(0);
    // -webkit-transform: translateX(0);
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
  #content-view.ng-leave-active {
    opacity: 0;
    // transform: translateX(-100%);
    // -webkit-transform: translateX(100%);
    transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 50, 50); 
  }

Here is a plunker but I'm not sure why it's not happening here. There might be something in my code that's doing the behavior.

Anyways, I like the behavior of this one when switching between view. However, I was hoping if we can correctly position the new target view when we click it. Right now, if let's say i'm displaying view1 and I scroll it down, once I click view 2, I want the position of view1 to stay as is but I want the position of view 2 to proper top position and not the same position as view1.

http://plnkr.co/edit/thDO1WZ9YUcV9yGfkVjh?p=preview

UPDATE:

Here is the solution on how I got it to work. I love the slide transition. It really looks so professional.

Snippet from main.html

<div id="content-view" ng-class="{ 'backEvent' : $root.backEvent === true, 'entryComplete' : $root.entryComplete === true  }" ui-view="content" autoscroll="false"></div>

Initial load of the form, $scope.entryComplete is set to false. When I fill out the form and click next, $scope.entryComplete becomes true. I set it in the controller. Since it became true, these 2 classes will be used, #content-view.entryComplete.ng-enter and #content-view.entryComplete.ng-enter-active.

Now when I click Back button, $root.entryComplete becomes false and $root.backEvent becomes true. Now that entryComplete is gone, these will be used #content-view.ng-enter and #content-view.ng-enter-active and for the ng-leave, these will be used #content-view.backEvent.ng-leave and #content-view.backEvent.ng-leave-active. I set backEvent back to false when I click Next again

Here is part of the magic that I've worked all day.

#content-view.ng-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  transition: all 2s ease-in-out;
}

#content-view.ng-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

#content-view.ng-leave {
  position: absolute;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transition: all 2s ease-in-out;
}

#content-view.ng-leave-active {
  position: absolute;
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
}

#content-view.entryComplete.ng-enter {
  opacity: 1;
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  transition: all 2s ease-in-out;
}

#content-view.entryComplete.ng-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

#content-view.backEvent.ng-leave {
  position: absolute;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transition: all 2s ease-in-out;
}

#content-view.backEvent.ng-leave-active {
  position: absolute;
  opacity: 0;
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
}

Don't forget about the other magic that I mentioned somewhere in the thread, the one that will store the current Y(top) coordinate value.

var offsets = document.getElementById('content-view').getBoundingClientRect();
document.getElementById('content-view').style.top = (offsets.top - 65) + 'px';

I took out the .style.position = "absolute" since I already got it hardcoded in the css. Enjoy!

Answer 1

this may be what you're looking for?

$scope.gotoTop = function() {
  $location.hash('top');
  $anchorScroll();
};

add this function to the controller of your navbar and add the function to each of your links.

<a ng-click="gotoTop()" href="#/home">Example</a>

Example NavCtrl.js

angular.module('app').controller('NavCtrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {

    $scope.gotoTop = function() {
      $location.hash('top');
      $anchorScroll();
    };

}]);