Angular ng顯示隱藏動畫

我想動畫如何我的ng顯示與mouseenter和mouseleave顯示。這些對於Angular 1.2.19和Angular-animate 1.2.19來說很好，而且似乎不適用於更新版本的Angular（1.3.0以上版本）。Angular ng顯示隱藏動畫

不幸的是我有一個幾乎完成的項目，需要使用Angular 1.3.0 +，並且動畫不再起作用。

最初有3個按鈕和一個名爲「文本1」的文本。我想顯示文本2,3或4，具體取決於我懸停在哪個「按鈕」上。

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

。請嘗試更改角版本1.3.0或以上。它不會工作。有沒有另一種方法來做到這一點？我寧願純粹的Angular，也不喜歡jquery。

謝謝。

來源

2015-10-07 Nitsorn Wongsajjathiti

貌似喜歡它適合我 –