CODEWITHSUNDEEP
javascriptjqueryangularjsanimationng-show
Nitsorn Wongsajjathiti
Nitsorn Wongsajjathiti

Reputation: 317

Angular ng-show ng-hide animations

I am trying to animate how my ng-show shows with mouseenter and mouseleave. These work fine for Angular 1.2.19 and Angular-animate 1.2.19, and does not seem to work with a newer versions of Angular (1.3.0 onwards).

Unfortunately I have an almost finished project that requires the use of Angular 1.3.0 +, and the animations no longer seem to work.

There are initially 3 buttons and one text called "Text 1". I am trying to show Text 2, 3 or 4 depending on what "button" I hover on. 

<!DOCTYPE html>
<html>

<head>


  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-animate.js"></script>
  <script>
    var app = angular.module('app', ['ngAnimate']).controller('Ctrl', function($scope) {
      $scope.total = true;
    })
  </script>
  <style>
    .sub_window.ng-hide-remove {
      -webkit-transition: 0.5s linear all;
      transition: 0.5s linear all;
      transition-delay: 0.5s;
      opacity: 0;
    }
    .sub_window.ng-hide-remove.ng-hide-remove-active {
      opacity: 1;
    }
  </style>
</head>

<body ng-app="app" ng-controller='Ctrl'>
  <div id="sub_buttons">
    <ul>
      <li ng-mouseenter="two = true; one = false" ng-mouseleave=" two = false; one = true">Show 2</li>
      <li ng-mouseenter="three = true; one = false" ng-mouseleave=" three = false; one = true">Show 3</li>
      <li ng-mouseenter="four = true; one = false" ng-mouseleave=" four = false; one = true">Show 4</li>
    </ul>
  </div>
  <div class="sub_window" ng-show="one">
    Text 1 here
  </div>
  <!-- Alternatives-->
  <div class="sub_window" ng-show="two">
    Text 2 here!

  </div>
  <div class="sub_window" ng-show="three">
    Text 3 here!
  </div>
  <div class="sub_window" ng-show="four">
    Text 4 here!
  </div>
</body>

</html>

Plunker

Please try changing the angular version to 1.3.0 or above. It wont work. Is there another way to do this? I would prefer pure Angular and no jquery.

Thank you.

Upvotes: 1

Views: 412

Answers (1)

Nitsorn Wongsajjathiti
Nitsorn Wongsajjathiti

Reputation: 317

Got it working!

I made the version of my Angular, Angular-route and Angular-animate to all be the same. (1.3.19)

Upvotes: 1

Related Questions