Clever Geek Handbook

I cannot animate ng-show / ng-hide animation

I know this is a well-known issue and has been asked several times in this forum, but I haven't found any good answers.

var aniApp = angular.module("aniApp", []);

aniApp.controller('mainCtrl', ['$scope',
  function($scope) {
    $scope.currentStep = 1;

    $scope.show = function(step) {
      $scope.currentStep = step;
    }
  }
]);
      

        
        
        
      

    
.step-box {
  width: 200px;
  border: solid 1px silver;
  padding: 20px;
}
.animate-show {
  width: 200px;
  border: solid 1px silver;
  padding: 20px;
}
.animate-show.ng-hide-remove,
.animate-show.ng-hide-add {
  display: block!important;
}
.animate-show.ng-hide-add {
  animation: 1s flyOut;
}
.animate-show.ng-hide-remove {
  animation: 1s flyIn;
}
@keyframes flyIn {
  from {
    left: 600px;
  }
  to {
    left: 0;
  }
}
@keyframes flyOut {
  from {
    left: 0;
  }
  to {
    left: -600px;
  }
}
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="aniApp">
  <div ng-controller="mainCtrl">
    <div ng-show="currentStep === 1" class="step-box animate-show">
      showing step 1
    </div>
    <div ng-show="currentStep === 2" class="step-box animate-show">
      showing step 2
    </div>
    <div ng-show="currentStep === 3" class="step-box animate-show">
      showing step 3
    </div>
    <br/>
    <a href="#" ng-click="show(1)">One</a>&nbsp;
    <a href="#" ng-click="show(2)">Two</a>&nbsp;
    <a href="#" ng-click="show(3)">Three</a>
  </div>
</div>
Run codeHide result


Here is my plucker:

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

Internally, I want the text to appear on the right and come out on the left. It should be easy, but I've been using it all day: --(

Can anyone understand why this is not working?

+3


source to share


1 answer


You must add a script tag with the angular ng-animate module as it is not part of the angular core and you must insert the angular ng-animate module as a dependency of your application.

In your html:

//After angular.min script tag
<script src="https://code.angularjs.org/1.2.23/angular-animate.min.js"></script>


In js:

  var aniApp = angular.module("aniApp", ['ngAnimate']);
0


source






More articles:


All Articles