我正在尝试用 mouseenter 和 mouseleave 制作我的 ng-show 的显示动画。这些在 Angular 1.2.19 和 Angular-animate 1.2.19 上运行良好，但似乎不适用于较新版本的 Angular(1.3.0 及以上版本)。
不幸的是，我有一个即将完成的项目，需要使用 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>请尝试将 Angular 版本更改为 1.3.0 或更高版本。它不会起作用。 还有其他方法可以做到这一点吗？我更喜欢纯 Angular 而没有 jquery。
谢谢。
最佳答案
成功了!
我将 Angular、Angular-route 和 Angular-animate 的版本设置为相同。 (1.3.19)
关于javascript - Angular ng-show ng-hide 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32983947/