Angular ng-显示ng-hide动画
Angular ng-显示ng-hide动画
提问于 2015-10-07 12:43:24
我正在尝试用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>
Plunker
请尝试将angular版本更改为1.3.0或更高版本。这不管用。有没有其他方法可以做到这一点？我更喜欢纯粹的Angular而不是jquery。
谢谢。
回答 1
Stack Overflow用户
发布于 2015-10-07 13:06:13
让它工作了！
我使我的Angular、Angular-route和Angular-animate的版本都是相同的。(1.3.19)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32983947
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号