1
我想动画如何我的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>
。请尝试更改角版本1.3.0或以上。它不会工作。 有没有另一种方法来做到这一点?我宁愿纯粹的Angular,也不喜欢jquery。
谢谢。
貌似喜欢它适合我 –