Angular ng-show ng-hide animations
Question
I am trying to animate how my ng-show shows with mouseenter and mouseleave. 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).
Unfortunately I have an almost finished project that requires the use of Angular 1.3.0 +, and the animations no longer seem to work.
There are initially 3 buttons and one text called "Text 1". I am trying to show Text 2, 3 or 4 depending on what "button" I hover on.
<!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. It wont work. Is there another way to do this? I would prefer pure Angular and no jquery.
Thank you.
1 answers
solution1
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. (1.3.19)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.