角度ng-show ng-hide动画
[英]Angular ng-show ng-hide animations
问题描述
I am trying to animate how my ng-show shows with mouseenter and mouseleave. 
我正在尝试用mouseenter和mouseleave动画我的ng-show显示方式。 These work fine for Angular 1.2.19 and Angular-animate 1.2.19, and does not seem to work with a newer versions of Angular (1.3.0 onwards). 这些对Angular 1.2.19和Angular-animate 1.2.19都适用，并且似乎不适用于较新版本的Angular（1.3.0及更高版本）。
Unfortunately I have an almost finished project that requires the use of Angular 1.3.0 +, and the animations no longer seem to work. 不幸的是，我有一个几乎完成的项目，需要使用Angular 1.3.0 +，并且动画似乎不再起作用。
There are initially 3 buttons and one text called "Text 1". 最初有3个按钮和一个称为“文本1”的文本。 I am trying to show Text 2, 3 or 4 depending on what "button" I hover on. 我试图显示文本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>
Please try changing the angular version to 1.3.0 or above. 请尝试将角度版本更改为1.3.0或更高版本。 It wont work. 它不会工作。 Is there another way to do this? 还有另一种方法吗？ I would prefer pure Angular and no jquery. 我更喜欢纯Angular而不是jquery。
Thank you. 谢谢。
1 个解决方案
解决方案1
1 2015-10-07 05:06:12
Got it working! 得到它的工作！
I made the version of my Angular, Angular-route and Angular-animate to all be the same. 我将Angular，Angular-route和Angular-animate的版本设置为相同。 (1.3.19) （1.3.19）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.