css - block ng-animate when going to the same state -

(solution on bottom of post).

currently we've problem in our project using ng-animate. we've got 2 states, lets name them now: state 1 , state 2. both have state name div class. <div class="state1">.

now state1 should slide top, , slide2 should slide in bottom. working fine when switching between slide1 , slide2. however, if user clicks on button moves state1 (when being on state1) content should change , no animation should done.

currently use: .state1.ng-leave { } leaving animation on state1 div, , .state2.ng-enter { } on entering state. can see, when i'm on state1 , clicking on button give page state1 still .state1.ng-leave { } called , animation done.

anyone got solution us? ng-leave {} state1 should triggered state2 entering.

state1/state2 flow

things we've tried:

• we tried add state('home.state1', { } block ng-animation state1. when enter state1, never need animation. didn't find solution using this. there can add onexit: didn't try?
• we tried work ng-animate in div.

preview in plnkr have made example going wrong. if click "state1", can see page sliding up, don't want that. want "refresh" page page without animation. if click state2 animation should done (just example shows). added button on state2 page shows how page should load when going state1 state1. please check example below:

https://plnkr.co/edit/zafczfoetcybruxobyl0?p=preview

edit - solution: solution kinda easy , found because of accepted reaction below. in .state() state1 added:

onenter: function() { $('.pane-animated').removeclass('state1'); }, 

this removes state1 class div (as state1 class on same div "pane-animated". added remove right class). applied animation on .state1.ng-leave { } cannot animation anymore doesn't have class anymore.

tested serveral times, , works great!

well here issue see. anchor tag # taken redirect angular route '/' set home page, angular redirects on anchor click home page , home page has ng-leave animation applied. animation.

in order achieve want need remove # href , keep empty href="". not make sense why want empty anchor gives dirty result result none less (hehe).

now assuming wanting done use # anchor navigate tag/element within same page using hash linking. can use controller $anchorscroll() it.

example code:

yourapp.controller('yourcontrollername', function($scope, $location, $anchorscroll) {   $scope.scrollto = function(id) {   $location.hash(id);   $anchorscroll();   }  });  <a ng-click="scrollto('sectiona')">foo</a>  <div id="sectiona">here are</div> 

hope helps.

[edit]

ok after knowing full requirement based on comment answer. think have come solution fit needs. not perfect works until find solution. here need (keeping sample code shared in mind).

a) make new page , call page-other.html. have same links buttons home page state 1 navigating home using href="#" in anchor , state2 navigating before. change <h2>home</h2> <h2>home- other</h2> keep track are.

b) add page routeprovider give same controller maincontroller follows:

.when('/other', {         templateurl: 'page-other.html',         controller: 'maincontroller'     }) 

c) add class page-no-animate in css setting home page background color etc. except animation part none follows:

.page-no-animate { background:#00d0bc; color:#00907c; }  .page-no-animate.ng-enter, .page-no-animate.ng-leave, .page-no-animate.ng-animate {    animation:none 0s;    -webkit-animation: none 0s; } 

d) change maincontroller code follows. has function named gotoother sets pageclass page-no-animate , redirects other page using $location.path("/other"). after funtion have if-else condition check on location apply appropriate animation or no-animation pageclass value dont want other page animate when click state 1 again come back:

animateapp.controller('maincontroller', ['$scope', '$location',  function($scope, $location) {     $scope.gotoother = function () {         $scope.pageclass = 'page-no-animate';         $location.path("other");     };     if ($location.path() == "/other")     {         $scope.pageclass = 'page-no-animate';     }     else     {         $scope.pageclass = 'page-home';     } }]); 

e) in page-home.html, in "state1" anchor tag: empty href attribute , add ng-click attribute call gotoother function created in controller follows

<a href="" ng-click="gotoother()" class="btn btn-success btn-lg">state1</a>