Question

我正在尝试动画我的ng-show如何用mouseenter和mouseleave显示。这些适用于Angular 1.2.19和Angular-animate 1.2.19，并且似乎不适用于较新版本的Angular（1.3.0以上版本）。

不幸的是，我有一个几乎完成的项目，需要使用Angular 1.3.0 +，动画似乎不再起作用。

最初有3个按钮和一个名为＆＃34; Text 1＆＃34;的文本。我试图显示文本2,3或4取决于＆＃34;按钮＆＃34;我徘徊在。

＆＃13;

<!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>

＆＃13;

Plunker

请尝试将角度版本更改为1.3.0或更高版本。它不会工作。还有另一种方法吗？我更喜欢纯粹的Angular而且没有jquery。

谢谢。

Answer 1

搞定了！

我的Angular，Angular-route和Angular-animate的版本都是相同的。（1.3.19）

Angular ng-show ng-hide动画

1 个答案: