ng-animate創建slideIn/slideOut轉換

Question

我很難用angular來執行簡單的幻燈片轉換，我知道如何使用jquery完美地完成此操作，但是我正在嘗試使用angular和它的工具。在這裏，這提供了迄今Click Here for example什麼都做一個例子 - 點擊鏈接店..

<div id="wrapper"> 
     <header ng-app="menu" id="main-nav"> 
      <a href="/" class="logo"></a> 
      <ul id="nav" ng-controller="subNavController"> 
       <li><a href="/">search</a></li> 
       <li> 
        <a class="hiddenMenu" ng-click="navMenu = !navMenu">shop</a> 
        <div ng-show="navMenu" class="block"></div> 
       </li> 
       <li><a href="/">Join LYB</a></li> 
       <li><a href="/">LYB Mix Series</a></li> 
       <li><a href="/">Help</a></li> 
       <li><a href="/">Sign In</a></li> 
       <li><a href="/">English</a></li> 
      </ul> 
     </header> 
</div> 

控制器

var app = angular.module("menu", []); 
app.controller("subNavController", function ($scope){ 
     $scope.menu = function(){ 
      $scope.navMenu = ! $scope.navMenu; 
     }; 
     $scope.navMenu = false; 

}）;

有誰知道如何使用角度

Answer 1

這是我如何實現類似的效果，實現效果的幻燈片，但對我來說它是從頂部滑動格英寸您應該能夠將幾個引用切換到top以適合您的情況。這需要angular-animate,jQuery以及指定爲要應用於元素的動畫名稱的類（在我的示例中爲.loading）。

app.animation('.loading', function() { 
    return { 
     addClass : function(element, className, done) { 
     if(className == 'ng-hide') { 
      jQuery(element).animate({ 
      top: '-100px' 
      }, 1000, done); 
     } 
     else { 
      done(); 
     } 
     }, 
     removeClass : function(element, className, done) { 
     if(className == 'ng-hide') { 
      element.css('top','-100px'); 

      /* remove it early so you can animate on it since 
      it is not possible using element.css() to set 
      a style using !important */ 
      element.removeClass('ng-hide'); 
      jQuery(element).animate({ 
      top:0 
      }, 0, done); 
     } 
     else { 
      done(); 
     } 
     } 
    }; 
    });