角度ng-show ng-hide動畫
[英]Angular ng-show ng-hide animations
問題描述
我正在嘗試用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>
請嘗試將角度版本更改為1.3.0或更高版本。 它不會工作。 還有另一種方法嗎？ 我更喜歡純Angular而不是jquery。
謝謝。
1 個解決方案
解決方案1
1 2015-10-07 05:06:12
得到它的工作！
我將Angular，Angular-route和Angular-animate的版本設置為相同。 （1.3.19）
ng-show / ng-hide打破CSS動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.